/* ==========================================================================
   DersTeders — Tasarım Rötuş Katmanı (tas-polish.css)
   --------------------------------------------------------------------------
   Tasarım denetiminden çıkan SİSTEMİK düzeltmeler tek katmanda toplandı.
   Sayfa başına özel stil DEĞİLDİR; her sayfada güvenle yüklenebilir.

   Kurallar:
     * Tüm seçiciler :where() ile specificity 0 -> sayfa CSS'i kazanır.
     * Marka paleti: petrol #0F6B7C / turkuaz #12879C / altın #C5923E / amber #E8783F
     * Koyu tema karşılıkları [data-theme="dark"] altında tanımlıdır.
     * prefers-reduced-motion desteklenir.
   Yüklenme sırası: icons.css -> ... -> brand.css -> tas-polish.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) YENİ ÖZGÜN İKONLAR (assets/icons/*.svg)
   icons.css'e dokunulmadan, bu katmana eklenen maskeler.
   Hepsi 24x24 viewBox, stroke tabanlı, currentColor ile renklenir.
   -------------------------------------------------------------------------- */
.icon-muzik   { -webkit-mask-image: url(../icons/muzik.svg);   mask-image: url(../icons/muzik.svg); }
.icon-yasakli { -webkit-mask-image: url(../icons/yasakli.svg); mask-image: url(../icons/yasakli.svg); }
.icon-kapat   { -webkit-mask-image: url(../icons/kapat.svg);   mask-image: url(../icons/kapat.svg); }
.icon-sunucu  { -webkit-mask-image: url(../icons/sunucu.svg);  mask-image: url(../icons/sunucu.svg); }
.icon-ekle    { -webkit-mask-image: url(../icons/ekle.svg);    mask-image: url(../icons/ekle.svg); }
.icon-sirala  { -webkit-mask-image: url(../icons/sirala.svg);  mask-image: url(../icons/sirala.svg); }
.icon-filtre  { -webkit-mask-image: url(../icons/filtre.svg);  mask-image: url(../icons/filtre.svg); }

/* Geriye dönük uyum: eski/yazım hatalı sınıflar gerçek ikona bağlanır
   (aksi halde `background-color:currentColor` yüzünden DOLU KUTU çizilir) */
.icon-ara     { -webkit-mask-image: url(../icons/arama.svg);   mask-image: url(../icons/arama.svg); }

/* --------------------------------------------------------------------------
   1) İKON KUTUSU — hizalama, esneme, minimum dokunma alanı
   -------------------------------------------------------------------------- */
:where(.ui-icon, .ders-icon) {
    flex-shrink: 0;
    /* currentColor + maskesiz bir sınıf düşerse kutu değil, ince uyarı çizgisi
       yerine saydam kalmasın diye degrade arka plan yok; kutu boyutu sabit. */
    display: inline-block;
}

/* İkon + metin satırında dikey orta hizalama (ikon metin altına kaymasın) */
:where(li, .row-item, .list-item, .chip, .btn, .tab, .nav-link, a) > .ui-icon.icon-inline {
    vertical-align: -0.19em;
}

/* İkon kabı olan öğeler: esneme + ortalama */
:where(.icon-box, .feature-icon, .stat-icon, .tool-icon, .card-icon,
       .f-icon, .row-ico, .ico-box, .subject-ico) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Yalnız ikonlu buton/kutu: 44x44 dokunma alanı */
:where(button.icon-btn, .icon-btn, button[aria-label]:has(> .ui-icon:only-child)) {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    :where(button.icon-btn, .icon-btn) {
        min-inline-size: 44px;
        min-block-size: 44px;
    }
}

/* --------------------------------------------------------------------------
   2) DOKUNMA ALANI — görsel boyut bozulmadan 44px hedef alanı
   (coarse pointer: pseudo-element ile tıklama alanı genişletilir)
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    :where(button, [role="button"], summary, a.chip, .chip, .tab-btn, .seg-btn)
        :not([class*="icon-btn"]):not(.mini):not(.sm):not(.xs):not([class*="mini"]) {
        position: relative;
    }
    :where(button, [role="button"], summary, a.chip, .chip, .tab-btn, .seg-btn)
        :not([class*="icon-btn"]):not(.mini):not(.sm):not(.xs):not([class*="mini"])::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        block-size: max(100%, 44px);
        transform: translateY(-50%);
        pointer-events: none;
    }
}

/* Masaüstünde birincil butonlar da 44px'yi tamamlasın */
:where(.btn-primary, .btn-cta, a.btn-primary, button[type="submit"]) {
    min-block-size: 44px;
    padding-inline: clamp(18px, 3vw, 26px);
}

/* --------------------------------------------------------------------------
   3) ERİŞİLEBİLİRLİK — görünür odak halkası
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #C5923E;
    outline-offset: 2px;
    border-radius: 6px;
}
[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: #F5C542;
}
/* Koyu zeminlerde altın halka düşük kontrastlı kalmasın -> iç halka ekle */
:where(.btn-primary, .btn-cta, .btn-accent, a.btn-register, .auth-buttons a):focus-visible {
    outline-color: #F5C542;
    box-shadow: 0 0 0 4px rgba(197, 146, 62, 0.28);
}

/* --------------------------------------------------------------------------
   4) TİPOGRAFİ — hiyerarşi ve satır yüksekliği tabanı
   (yalnızca satır yüksekliği/harf aralığı: font-size'a dokunulmaz)
   -------------------------------------------------------------------------- */
:where(h1) { line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; }
:where(h2) { line-height: 1.22; letter-spacing: -0.012em; text-wrap: balance; }
:where(h3) { line-height: 1.3; }
:where(h4, h5, h6) { line-height: 1.35; }

:where(main p, article p, section p, .content p, .prose p, td, th, dd, dt, figcaption)
    :not([class*="lead"]):not([class*="tight"]):not([class*="badge"])
    :not([class*="chip"]):not([class*="tag"]):not([class*="eyebrow"]) {
    line-height: 1.6;
}

:where(main li, article li, .content li):not([class*="tight"]):not([class*="chip"]) {
    line-height: 1.6;
}

/* Uzun İngilizce kelime/URL taşmasın (yatay scrollbar kaynağı #1) */
:where(p, li, td, th, dd, dt, h1, h2, h3, h4, .desc, .text) {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* --------------------------------------------------------------------------
   5) BOŞLUK / KART RİTMİ — sayfa bölümleri arası tutarlı nefes
   -------------------------------------------------------------------------- */
/* Bölümler arası dikey ritim — yalnız üst düzey ve container içi bölümler,
   iç içe kart ızgaralarına dokunulmaz. */
:where(body > section + section, .container > section + section, main > section + section) {
    margin-block-start: clamp(40px, 6vw, 72px);
}

:where(.card-grid, .grid-cards, .cards, .feature-grid, .tool-grid) > * + * {
    margin-block-start: clamp(14px, 1.6vw, 20px);
}
@media (min-width: 700px) {
    :where(.card-grid, .grid-cards, .cards, .feature-grid, .tool-grid) > * + * {
        margin-block-start: 0;
    }
}

/* Kart iç boşluğu tabanı (sayfa özel padding varsa sayfa kazanır) */
:where(.card, .feature-card, .stat-card, .tool-card, .value-card, .info-card) {
    padding: clamp(18px, 2.1vw, 24px);
    border-radius: var(--radius-lg, var(--radius, 16px));
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   6) YATAY TAŞMA KORUMASI
   -------------------------------------------------------------------------- */
:where(img, svg, video, canvas, iframe, table) { max-inline-size: 100%; }
:where(pre, .pre, .code-block, .highlight) { overflow-x: auto; max-inline-size: 100%; }
:where(pre code) { white-space: pre; }
:where(table) { inline-size: 100%; }
:where(.table-wrap, .table-scroll) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   7) HAREKET AZALTMA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    :where(html) { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   8) İNCE MİKRO ETKİLEŞİM + SEÇİM
   -------------------------------------------------------------------------- */
:where(::selection) {
    background: rgba(15, 107, 124, 0.22);
    color: inherit;
}
[data-theme="dark"] :where(::selection) {
    background: rgba(94, 203, 222, 0.3);
}

/* Başlıktaki altın vurgu çizgisi (marka imzası) — sayfa tanımlamıyorsa */
:where(.section-head, .section-header) h2:not([class]) { position: relative; }

/* --------------------------------------------------------------------------
   9) KOYU TEMA — marka karşılıkları
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --brand-petrol-mid: #2AA3B8;
    --brand-btn-outline: rgba(94, 203, 222, 0.5);
}
[data-theme="dark"] :where(.card, .feature-card, .stat-card, .tool-card, .value-card, .info-card) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}