/* Global font */
:root{
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sidebar-w: 260px; /* desktop sol menü genişliği */
}
html, body{height:100%;}
body{background:#f3f4f6;}

/* Topbar (sadece mobil) */
.topbar{
  background:#fff; border-bottom:1px solid #e5e7eb; height:56px;
  display:flex; align-items:center; justify-content:space-between; padding:0 .75rem;
  position:sticky; top:0; z-index:1030;
}
.topbar .logo{height:36px;}

/* Layout */
.app{min-height:calc(100vh - 56px);} /* topbar yüksekliğini düş */
@media (min-width: 992px){
  .app{min-height:100vh;} /* desktopta topbar yok */
}

/* Sidebar (desktop) */
.sidebar{
  width:var(--sidebar-w); min-height:100vh; background:#fff;
  border-right:1px solid #e5e7eb;
}
.sidebar-logo{height:59px;}
.menu{padding-bottom:1rem;}
.menu-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.9rem 1rem; color:#111827; text-decoration:none;
  font-size:15px; font-weight:300;
}
.menu-link:hover{ background:#f8fafc; color:#0f172a; }
.menu-sep{
  margin:.5rem 0; border:0; height:4px; background:#f1f5f9; /* kalın ayraç */
}

/* Content */
.content-wrap{padding:2rem;}
.content-panel{
  background:#fff; border-radius:.75rem;
}
.content-panel h3{font-size:24px;}
.content-panel p{font-size:14px; font-weight:300;}
.qr-box{
  width:140px; height:140px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; background:#fff; border:2px dashed #e5e7eb; border-radius:.25rem;
}
.qr-box img{max-width:112px; height:auto;}
.store-badges img{height:44px;}

/* App Store & Google Play rozetlerini eski boyuta döndür */
.store-badges img{
  height:44px !important;   /* önceki tasarımdaki sabit yükseklik */
  width:auto !important;
  max-width:none !important; /* mobilde daraltmayı iptal et */
}

/* Taşma olmasın, sığmazsa alta geçsin */
.store-badges{
  flex-wrap:wrap;
  gap:.75rem;
}


/* Offcanvas (mobil menü) */
.offcanvas-menu .menu-link{padding:.9rem 0;}
.offcanvas-menu .menu-sep{height:4px; background:#f1f5f9; margin:.5rem 0;}

/* Responsive */
@media (max-width: 991.98px){
  /* desktop sidebar gizle, topbar görünsün */
  .sidebar{display:none!important;}
  .content-wrap{padding:1rem;}
}
@media (min-width: 992px){
  .topbar{display:none;} /* desktopta topbar gizli */
}

/* --- MOBİL KAYMA/TAŞMA FIX --- */
html, body { overflow-x: hidden; }

/* Mobilde flex layout'u kapat, blok akışa dön */
@media (max-width: 991.98px){
  .app{ display:block; }          /* d-flex yerine blok akış */
  .content-wrap{ padding:1rem; }
}

/* Flex çocuklarının taşmasını engelle */
.content-wrap{ min-width:0; }

/* QR kutusu küçük ekranlarda daralsın */
.qr-box{
  width:min(140px, 80vw);
  height:min(140px, 80vw);
}

/* Mağaza rozetleri satıra sığmazsa alt satıra geçsin */
.store-badges{ flex-wrap: wrap; gap:.75rem; }
.store-badges img{
  height:auto;
  max-width:44%;          /* iki rozet yan yana sığar */
}

/* SAĞ ALAN: full beyaz, menüye soldan boşluk, içerik ortada */
:root{ --content-w: 1000px; } /* 900 → 1000 */
.dashboard-right{ background:#fff; padding-left:16px; } /* menüden ayrım; üst/sağ yok */
.right-container{ max-width:var(--content-w); margin:26px auto 18px; padding:0; }
.block{ margin-bottom:12px; }
.dashboard-right{ font-size:13px; }

html, body { background:#fff !important; }
.dashboard-right { background:#fff !important; }

  /* ÜST ŞERİT (klik yok, kompakt) */
  .welcome-strip-xx{
    margin-top: 48px;
    display:grid;
     grid-template-columns: 54px 1fr 190px 190px 190px;
    align-items:stretch;
    border:1px solid #e7ebf2; border-radius:12px; overflow:hidden; background:#fff;
  }
  .wel-icon-col{
    background:#f5f6fa; border-right:1px solid #eef2f7;
    display:flex; align-items:center; justify-content:center;
  }
  .wel-icon-col i{ color:#9aa7c3; font-size:18px; }
  .wel-text{ padding:12px 14px; }
  .wel-title{ font-weight:600; font-size:14px; color:#111827; }
  .wel-desc{ color:#6b7280; font-size:13px; margin-top:3px; }
  .wel-stat{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; background:#fbfcff;
    border-left:1px solid #eef2f7; cursor:default; user-select:none;
  }
  .wel-stat i{ color:#1f4ed8; font-size:16px; }
  .st-title{ font-size:12px; color:#2450b6; font-weight:600; line-height:1; }
  .st-value{ font-size:13px; color:#111827; line-height:1.2; }

  /* LİSTE */
  .list-card{ margin-top: 30px; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; }
  .list-head{ background:#eaf2ff; color:#111827; font-weight:600; font-size:13px; padding:.5rem .75rem; }
  .recent-item{
    display:grid; grid-template-columns: 8px 136px 1fr max-content;
    align-items:center; gap:.55rem;
    padding:.5rem .75rem; border-top:1px solid #eef2f7; background:#fff;
  }
  .recent-item:nth-child(even){ background:#f8fafc; }
  .recent-item .dot{ width:6px;height:6px;border-radius:50%;background:#6b7280;display:inline-block; }
  .recent-item .time{ color:#6b7280; font-size:12px; }
  .recent-item .title{ color:#1f2937; font-size:13px; text-decoration:none; }
  .recent-item .title:hover{ text-decoration:underline; }
  .btn-join{
    background:#eef2f7; border-color:#e5e7eb; color:#111827;
    padding:.2rem .55rem; font-size:12px; border-radius:999px;
  }

  /* SLIDER */
  .slider-card{  margin-top: 30px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:10px; }
  .banner-image{ border-radius:14px; overflow:hidden; background:#eaf2ff; }
  .banner-image img{ width:100%; height:auto; display:block; }
  .banner-controls{ display:flex; justify-content:center; gap:6px; padding-top:6px; }
  .btn-ctrl{
    --bs-btn-padding-y:.2rem; --bs-btn-padding-x:.45rem; --bs-btn-font-size:.9rem;
    border:1px solid #e5e7eb;
  }

  /* MOBİL */
  /* ===== MOBILE FIX (<=991.98px) ===== */
  @media (max-width: 991.98px){
    /* Tam ekrana otursun, yatay taşma olmasın */
    html, body { overflow-x: hidden; }
    .dashboard-right{ padding-left: 0; }             /* soldaki boşluğu kaldır */
    .right-container{
      max-width: 100%;
      width: 100%;
      margin: 12px 0;                                 /* üst-alt küçük boşluk */
      padding: 0 12px;                                /* 12px kenar payı */
    }

    /* Üst şerit: 2 kolon (ikon + metin), istatistikler alta dizilsin */
   .welcome-strip-xx{
display:grid;
grid-template-columns: repeat(3, 1fr) !important; /* 3 sütun */
}
.wel-icon-col,
.wel-text{ grid-column: 1 / -1; }                   /* ikon+metin tam satır */
.wel-stat{
border-left: 0;
border-top: 1px solid #eef2f7;
padding: 10px 8px;
display:flex; align-items:flex-start; gap:8px;
}

    /* Liste satırı dar ekran kolonları */
    .recent-item{ grid-template-columns: 8px 100px 1fr max-content; }
    .btn-join{ white-space: nowrap; }

    /* Öğretmen yazıları: görsel biraz daha yüksek olabilir */
    .tp-img{ height: 180px; }
  }


  .teachers-posts{ font-size:13px; }
  /* Başlık şeridi */
  .tp-head{
     margin-top: 40px; background:#eaf2ff; border:1px solid #e2e8f0; border-radius:10px;
    padding:8px 12px;
  }
  .tp-icon{ color:#2450b6; font-size:16px; }
  .tp-title{ font-weight:600; color:#111827; }

  .btn-all{
    padding:.25rem .6rem; font-size:12.5px; border-radius:999px;
    border-color:#e5e7eb; color:#374151; background:#fff;
  }
  .btn-all:hover{ background:#f8fafc; color:#111827; }

  /* Kart */
  .tp-card{
     margin-top: -20px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
    overflow:hidden; height:100%; display:flex; flex-direction:column;
    transition:box-shadow .2s ease;
  }
  .tp-card:hover{ box-shadow:0 6px 16px rgba(2,6,23,.06); }
  .tp-img{ height:140px; overflow:hidden; }
  .tp-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tp-body{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
  .tp-card-title{ font-size:13px; font-weight:600; color:#111827; margin:0; }
  .tp-excerpt{
    font-size:12.5px; color:#6b7280; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .tp-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
  .tp-meta .author{ font-size:12.5px; color:#111827; }
  .tp-meta i{ color:#6b7280; }

  /* Responsive */
  @media (max-width: 575.98px){
    .tp-img{ height:160px; }
  }

  a,
  a:hover,
  a:focus,
  a:active,
  a:visited {
    text-decoration: none !important;
  }

    /* Yerleşim (sağ alan) */
:root{ --content-w: 1000px; }
.dashboard-right{ background:#fff; padding-left:16px; }
.right-container{ max-width:var(--content-w); margin:24px auto 20px; padding:0 8px; }

/* Başlık */
.faq-head h5{ margin:0 0 4px; font-size:19px; font-weight:600; color:#111827; }
.faq-head p{ margin:0 0 10px; font-size:12px; color:#000; font-weight:300 }
.faq-head{ margin-top: 50px; position:relative; }

/* Accordion kap (kart görünüm) */
.faq-wrap{
border:1px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden;
}

/* Accordion item/başlık */
.faq-acc .accordion-item{ border:0; }
.faq-acc .accordion-button{
background:#f8fafc;
padding:10px 14px;
font-size:13px; color:#111827;
box-shadow:none !important;
border-bottom:1px solid #eef2f7;
}
.faq-acc .accordion-button:not(.collapsed){
background:#eef4ff; color:#111827;
}

/* Artı/Eksi ikon */
.faq-acc .accordion-button::after{
content:'+'; background:none; transform:none; font-weight:700; color:#6b7280;
}
.faq-acc .accordion-button:not(.collapsed)::after{
content:'–'; color:#1f4ed8;
}

/* İçerik */
.faq-acc .accordion-body{
background:#fff; font-size:13px; color:#4b5563;
border-bottom:1px solid #eef2f7;
padding:12px 14px;
}

/* Son öğede alt çizgi olmasın */
.faq-acc .accordion-item:last-child .accordion-body{ border-bottom:0; }

/* Mobil tam genişlik */
@media (max-width: 991.98px){
.dashboard-right{ padding-left:0; }
.right-container{ max-width:100%; width:100%; padding:0 12px; margin:16px 0; }
}

/* Menü ile aradaki boşluk */
.page-faq.dashboard-right{ padding-left:129px; }

/* Başlık şeridi ve akordeon kutusu: sabit 840px */
.page-faq .faq-head,
.page-faq .faq-wrap{
width:840px;
max-width:840px;
}

/* Soru başlığı arkaplanı: #D9D9D9 %20 */
.page-faq .faq-acc .accordion-button{
background: rgba(217,217,217,.20); /* D9D9D9 @20% */
}
.page-faq .faq-acc .accordion-button:not(.collapsed){
background: rgba(217,217,217,.35); /* açıkken biraz koyu */
}

/* Mobilde ekrana tam otur */
@media (max-width: 991.98px){
.page-faq.dashboard-right{ padding-left:0; }
.page-faq .faq-head,
.page-faq .faq-wrap{ width:100%; max-width:100%; }
}

/* SSS başlıkları arasında boşluk bırak */
.page-faq .faq-wrap{ padding:8px; }                                   /* kutu içinde nefes */
.page-faq .faq-acc .accordion-item + .accordion-item{ margin-top:8px; }/* başlıklar arası 8px */
.page-faq .faq-acc .accordion-item{ border-radius:8px; overflow:hidden; }/* köşeler temiz kalsın */


/* Dış alan */
.premium-section {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #ffffff;
    display: flex;
  justify-content: center;
}

/* 1000px genişlikte, ortada */
.premium-wrapper {
    width: 950px;
    max-width: 100%;
    margin: 0 auto;
    margin-left: 70px;
    margin-right: auto;
}

/* Başlık ve metinler */
.premium-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222222;
}

.premium-intro {
    font-size: 13px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 24px;
}

/* Kart */
.premium-card {
    border-radius: 2px;
    border: 1px solid #e4e4e4;
    box-shadow: none;
    overflow: hidden;
}

/* Kart başlığı */
.premium-card-header {
    background-color: #f6f6f6;
    border-bottom: 1px solid #e4e4e4;
    font-size: 13px;
    font-weight: 500;
    color: #444444;
    padding: 12px 18px;
}

/* Plus ikonu */
.premium-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #999999;
    font-size: 12px;
    line-height: 1;
    color: #666666;
}

/* Kart içeriği */
.premium-card-body {
    padding: 16px 18px 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #555555;
}

.premium-card-body p {
    margin-bottom: 10px;
}

.premium-card-body p:last-child {
    margin-bottom: 0;
}

/* Form grupları */
.premium-form-group {
    margin-bottom: 22px;
}

.premium-form-group label {
    display: block;
    font-size: 12px;
    color: #666666;
    margin-bottom: 6px;
}

/* Inputlar */
.premium-input {
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    height: 50px;
    font-size: 13px;
    padding: 10px 12px;
    box-shadow: none;
}

.form-select {
    font-size: 13px;
    height: 50px;
}

.premium-input:focus {
    border-color: #bbbbbb;
    outline: none;
    box-shadow: none;
}

    .premium-plan-section {
    margin-top: 30px;
}

/* İçerik dikeyde: üstte kart, altında sağda buton */
.premium-plan-container {
    /* flex yok, blok kalsın */
}

/* Kart tam genişlik */
.premium-plan-card {
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background-color: #ffffff;
    padding: 18px 24px;
}

/* Kart içi kolonlar */
.premium-plan-row {
    display: flex;
    align-items: center;
}

.premium-plan-col {
    padding: 0 18px;
}

.premium-plan-col-left {
    padding-left: 0;
}

.premium-plan-col-middle {
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}

.premium-plan-col-right {
    padding-right: 0;
}

/* Sol taraf */
.premium-plan-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111111;
}

.premium-plan-badge {
    display: inline-block;
    background-color: #00e000;
    color: #ffffff;
    font-size: 11px;
    padding: 5px 16px;
    border-radius: 999px;
    font-weight: 500;
    margin-bottom: 10px;
}

.premium-plan-text {
    font-size: 12px;
    color: #777777;
    margin: 0;
    max-width: 550px;
}

/* Orta taraf */
.premium-plan-note {
    font-size: 11px;
    color: #999999;
    margin-bottom: 4px;
}

.premium-plan-old {
    font-size: 11px;
    color: #aaaaaa;
    margin-bottom: 4px;
}

.premium-plan-old-price {
    text-decoration: line-through;
    margin-right: 4px;
}

.premium-plan-price {
    font-size: 18px;
    font-weight: 600;
    color: #111111;
}

.premium-plan-price span {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
}

/* Sağ taraf */
.premium-plan-features {
    list-style-type: disc;
    padding-left: 18px;
    margin: 0;
    font-size: 12px;
    color: #555555;
}

.premium-plan-features li + li {
    margin-top: 4px;
}

/* Kartın ALTINDA sağda buton */
.premium-plan-btn {
    display: inline-block;
    margin-top: 24px;
    background-color: #0b4bbf;
    border-color: #0b4bbf;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    float: right;
}

.premium-plan-btn:hover {
    background-color: #093f9f;
    border-color: #093f9f;
    color: #ffffff;
}


/* --- MOBİL DÜZENLEMELER --- */
  @media (max-width: 768px) {

    /* Dış alan: sola kaymayı kaldır, içeriği tam genişlik yap */
    .premium-section {
      display: block;            /* flex zorunlu değil mobilde */
      padding-top: 24px;
      padding-bottom: 24px;
    }

    .premium-wrapper {
      width: 100%;
      max-width: 100%;
      margin: 0;                 /* margin-left:70px'i ez */
      padding: 0 16px;           /* sağ/sol nefes */
    }

    .premium-title {
      font-size: 18px;
    }

    .premium-intro {
      font-size: 13px;
    }

    /* Plan kartı mobilde alt alta gelsin */
    .premium-plan-card {
      padding: 16px;
    }

    .premium-plan-row {
      flex-direction: column;        /* 3 sütun alt alta */
      align-items: flex-start;
    }

    .premium-plan-col {
      padding: 6px 0;
    }

    .premium-plan-col-middle {
      border-left: none;
      border-right: none;
      margin-top: 4px;
      margin-bottom: 4px;
    }

    .premium-plan-text {
      max-width: 100%;
    }

    /* Buton kartın altında, tam sağa yaslanmasın */
    .premium-plan-btn {
      float: none;
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 16px;
    }
  }

  /* Köşe yazısı genel alanı */
.article-section {
    padding: 40px 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

/* Sağ içerik alanında 1000px genişlik, soldan biraz kaçık */
.article-wrapper {
    width: 950px;
    max-width: 100%;
    margin: 0 auto;
    margin-left: 70px;   /* menüden biraz uzaklaştırır */
}

/* Başlık ve yazar satırı */
.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.article-title {
    font-size: 14px;
    font-weight: 500;
    color: #222222;
    margin: 0;
}

.article-author {
    font-size: 12px;
    color: #777777;
}

/* Metin alanı */
.article-body p {
    font-size: 12px;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 14px;
}

.article-body p:last-child {
    margin-bottom: 0;
}

/* Mobilde tam ekrana otursun */
@media (max-width: 768px) {
    .article-section {
        padding: 24px 0;
        display: block;
    }

    .article-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 16px;
    }
}

 /* --- Liste sayfası genel alan --- */
    .article-list-section {
        padding: 40px 0;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
    }

    /* Sağ içerik alanı, 1000px genişlik ve menüden biraz kaçık */
    .article-list-wrapper {
        width: 900px;
        max-width: 100%;
        margin: 0 auto;
        margin-left: 70px;   /* soldaki menüyle dib dibe olmasın */
    }

    /* Üst başlık + filtre */
    .article-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
    }

    .article-list-heading {
        font-size: 17px;
        font-weight: 500;
        color: #222222;
        margin-bottom: 4px;
    }

    .article-list-subheading {
        font-size: 12px;
        color: #777777;
    }

    /* Öğretmen seç select */
    .article-teacher-select-wrapper {
        position: relative;
        width: 250px;
    }

    .article-teacher-select {
        width: 100%;
        font-size: 12px;
        color: #555555;
        padding: 8px 28px 8px 10px;
        border-radius: 2px;
        border: 1px solid #e0e0e0;
        background-color: #ffffff;
        appearance: none;            /* default oku gizle */
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
    }

    /* Sağdaki küçük ok */
    .article-teacher-select-wrapper::after {
        content: "▾";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: #777777;
        pointer-events: none;
    }

    /* --- Kartlar --- */
    .article-list-card {
        display: flex;
        border: 1px solid #eaeaea;
        border-radius: 2px;
        background-color: #ffffff;
        margin-bottom: 8px;
        overflow: hidden;
    }

    .article-list-thumb {
        width: 170px;
        flex-shrink: 0;
    }

    .article-list-thumb img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .article-list-content {
        padding: 12px 16px;
        flex: 1;
    }

    .article-list-title {
        font-size: 14px;
        font-weight: 500;
        color: #222222;
        margin: 0 0 6px;
    }

    .article-list-excerpt {
        font-size: 11px;
        line-height: 1.6;
        color: #666666;
        margin: 0 0 8px;
    }

    .article-list-date {
        font-size: 11px;
        color: #999999;
    }

    /* --- Sayfalama --- */
    .article-pagination {
        margin-top: 12px;
        display: flex;
        justify-content: center;
        gap: 4px;
    }

    .article-page-item {
        min-width: 36px;
        height: 24px;
        padding: 0 6px;
        border-radius: 0;
        border: 1px solid #e0e0e0;
        background-color: #ffffff;
        font-size: 11px;
        color: #666666;
        cursor: pointer;
    }

    .article-page-item.active {
        background-color: #111111;
        border-color: #111111;
        color: #ffffff;
    }

    /* --- Mobil düzen --- */
    @media (max-width: 768px) {
        .article-list-section {
            padding: 24px 0;
            display: block;
        }

        .article-list-wrapper {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0 16px;
        }

        .article-list-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .article-teacher-select-wrapper {
            width: 100%;
            max-width: 220px;
        }

        .article-list-card {
            flex-direction: row; /* istersen column da yapabilirsin */
        }

        .article-list-thumb {
            width: 120px;
        }

        .article-list-content {
            padding: 10px 12px;
        }
    }