/* =============================================================================
   Lokaltenis Public Web — yeniden tasarım katmanı
   =============================================================================
   site.css'teki token'lar ve bileşen sınıfları (chip, lt-card, lt-table,
   score-line, lt-list…) AYNEN KORUNUR — iç sayfalar onları kullanıyor ve
   testler o çıktıyı doğruluyor. Buradakiler ÜSTÜNE eklenir: marka üst barı,
   ana sayfa hero'su, kart ızgaraları, süzgeç çubuğu ve uygulama çağrısı.

   Mobil öncelikli: varsayılan tek sütun, geniş ekranda ızgara.
   ========================================================================== */

/* Sayfa genişliği artık TEK ve site.css'te (.page). Buradaki .page--wide
   kaldırıldı: iki genişliğin varlığı sayfalar arası hiza kaymasının kaynağıydı. */

/* ------------------------------------------------------------- Marka üst barı */

.lt-header {
    padding: 16px 0 10px;
    justify-content: space-between;
}
/* Marka görseli: VARYANT ve ÖLÇÜ bileşenden gelir (_Wordmark partial'ı, kural
   SharedKernel/Branding/Wordmark). Burada yalnızca yerleşim kalır — yükseklik
   yazılsaydı bileşenin hesapladığı ölçüyü ezerdi. */
.lt-header .brandmark { display: block; }
.lt-header nav { display: flex; align-items: center; gap: 6px; }
.lt-header nav a {
    color: var(--lt-text-2); font-size: 14px; font-weight: 600;
    padding: 10px 12px; border-radius: var(--lt-r-control);
    min-height: 44px; display: inline-flex; align-items: center;
}
.lt-header nav a:hover { background: var(--lt-success-bg); color: var(--lt-primary-dark); text-decoration: none; }
.lt-header nav a.cta {
    background: var(--lt-primary); color: #fff;
    box-shadow: 0 2px 8px rgba(24, 165, 88, .28);
}
.lt-header nav a.cta:hover { filter: brightness(1.05); background: var(--lt-primary); color: #fff; }

/* --------------------------------------------------------------- Ana hero */

.lt-hero--home {
    padding: 40px 24px;
    text-align: center;
    background:
        radial-gradient(760px 300px at 50% -20%, #1B6E53 0%, transparent 62%),
        linear-gradient(150deg, var(--lt-hero-1) 0%, #0A2A20 100%);
}
/* KOYU zeminde kelime markası — varyantı ve ölçüyü _Wordmark bileşeni seçer. */
.lt-hero--home .wordmark { margin: 0 auto 6px; }
.lt-hero--home h1 {
    font-size: 30px; line-height: 1.2; margin: 8px 0 6px;
    letter-spacing: -.02em; color: #fff;
}
.lt-hero--home p { color: rgba(255, 255, 255, .78); margin: 0 auto; max-width: 46ch; font-size: 15px; }
.lt-hero__actions {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px;
}
.lt-hero__actions .btn.ghost { border: 1.4px solid rgba(255, 255, 255, .40); color: #fff; }
.lt-hero__actions .btn.ghost:hover { background: rgba(255, 255, 255, .10); text-decoration: none; }

/* Hero altındaki canlı sayılar — büyük ve tabular. */
.lt-hero__stats {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px;
}
.lt-hero__stat {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--lt-r-control);
    padding: 10px 18px; min-width: 104px;
}
.lt-hero__stat b {
    display: block; font-size: 22px; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.lt-hero__stat span { font-size: 12px; color: rgba(255, 255, 255, .70); }

/* ------------------------------------------------------------ Bölüm başlığı */

.lt-section {
    margin: 30px 0 12px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.lt-section h2 { font-size: 20px; margin: 0; }
.lt-section .more { font-size: 13.5px; font-weight: 600; }

/* --------------------------------------------------------------- Izgaralar */

.lt-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .lt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lt-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Turnuva kartı */
.t-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card);
    box-shadow: var(--lt-shadow);
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}
.t-card:hover { box-shadow: 0 8px 22px rgba(16, 24, 40, .10); transform: translateY(-1px); text-decoration: none; }
.t-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.t-card__name { font-weight: 600; font-size: 15.5px; color: var(--lt-text); overflow-wrap: anywhere; }
.t-card__club { font-size: 13px; color: var(--lt-text-2); }
.t-card__meta {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px;
    border-top: 1px solid var(--lt-border);
    font-size: 12.5px; color: var(--lt-text-2);
}
.t-card__meta b { color: var(--lt-text); font-variant-numeric: tabular-nums; }

/* Kulüp kartı */
.c-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card);
    box-shadow: var(--lt-shadow);
    padding: 16px;
    display: flex; align-items: center; gap: 12px;
}
.c-card:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(16, 24, 40, .10); }
.c-card__logo {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
    background: var(--lt-primary-dark); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px; overflow: hidden;
}
.c-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.c-card__name { font-weight: 600; color: var(--lt-text); }
.c-card__meta { font-size: 12.5px; color: var(--lt-text-2); }

/* -------------------------------------------------------------- Süzgeç çubuğu */

.lt-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.lt-filters input[type="search"], .lt-filters select {
    min-height: 44px; border-radius: var(--lt-r-control);
    border: 1px solid var(--lt-border); background: var(--lt-surface);
    padding: 0 12px; font-size: 14px; color: var(--lt-text);
    font-family: inherit;
}
.lt-filters input[type="search"] { flex: 1 1 220px; }
.lt-filters input:focus, .lt-filters select:focus {
    outline: none; border-color: var(--lt-primary);
    box-shadow: 0 0 0 3px rgba(24, 165, 88, .16);
}

/* Sayfalama */
.lt-pager { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.lt-pager .btn { min-height: 44px; }
.lt-pager .count { color: var(--lt-text-2); font-size: 13px; margin-left: auto; }

/* -------------------------------------------------------- Uygulama çağrısı */

.lt-app {
    margin: 30px 0 8px;
    border-radius: var(--lt-r-card);
    padding: 24px;
    background: linear-gradient(135deg, var(--lt-hero-1), var(--lt-primary-dark));
    color: #fff;
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.lt-app h2 { color: #fff; margin: 0 0 4px; font-size: 19px; }
.lt-app p { color: rgba(255, 255, 255, .78); margin: 0; font-size: 14px; max-width: 52ch; }
.lt-app .icon {
    width: 58px; height: 58px; border-radius: 16px; overflow: hidden; flex: 0 0 58px;
    background: rgba(255, 255, 255, .10);
}
.lt-app .icon img { width: 100%; height: 100%; object-fit: cover; }
.lt-app__side { display: flex; align-items: center; gap: 14px; }

/* ------------------------------------------------------------- Boş durumlar */

.lt-empty {
    text-align: center; padding: 34px 20px;
    border: 1px dashed var(--lt-border);
    border-radius: var(--lt-r-card);
    background: var(--lt-surface);
    color: var(--lt-text-2);
}
.lt-empty strong { display: block; color: var(--lt-text); margin-bottom: 4px; }

/* --------------------------------------------------- Sayfa başlığı (iç sayfa) */

.lt-pagehead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.lt-crumb { font-size: 13px; color: var(--lt-text-2); margin-bottom: 4px; }

/* Büyük sayı bloğu (LRS, katılımcı) — mobil dildeki "büyük net sayı". */
.lt-bignum {
    font-size: 34px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--lt-primary-dark);
}
.lt-hero .lt-bignum { color: #fff; }

/* ------------------------------------------------------------- Alt bilgi */

.lt-footer { align-items: center; }
.lt-footer .brandmark { opacity: .75; }

@media (min-width: 640px) {
    .lt-hero--home { padding: 56px 32px; }
    .lt-hero--home h1 { font-size: 38px; }
}

/* ------------------------------------------------- Sıralama / maç bileşenleri */

/* Sıra rozeti; ALTIN yalnızca birincilikte (marka kuralı). */
.rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 7px;
    border-radius: var(--lt-r-pill, 999px);
    background: var(--lt-neutral-bg, #F2F4F7); color: var(--lt-text-2);
    font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.rank--gold { background: var(--lt-gold-bg); color: #B07A16; }

/* İl bağlantıları (/siralama/{il}) — sarar; her biri en az 44 px dokunma alanı. */
.lt-citylinks { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-citylinks .chip { min-height: 44px; padding: 0 14px; font-variant-numeric: tabular-nums; }

/* LRS etiketi — sayı, adın yanında ikincil ama okunur. */
.lrs-tag {
    margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--lt-success-bg); color: #0B6B44;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Maç satırı — turnuva sayfasında maçlar düz liste değil, tıklanır kart. */
.m-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card);
    box-shadow: var(--lt-shadow);
    padding: 14px 16px;
    min-height: 56px;
    color: var(--lt-text);
}
.m-row:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(16, 24, 40, .10); }
.m-row__side { flex: 1 1 0; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.m-row__side:last-of-type { text-align: right; }
.m-row__side.is-winner { font-weight: 700; color: var(--lt-primary-dark); }
.m-row__vs { color: var(--lt-text-2); font-size: 12px; flex: 0 0 auto; }

/* İstatistik kartı (oyuncu kariyeri) — büyük ve net sayı. */
.s-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card);
    box-shadow: var(--lt-shadow);
    padding: 16px;
    display: flex; flex-direction: column; gap: 2px;
}
.s-card__label { font-size: 12.5px; color: var(--lt-text-2); font-weight: 500; }
.s-card__value {
    font-size: 28px; font-weight: 700; line-height: 1.15;
    color: var(--lt-text); font-variant-numeric: tabular-nums;
}

/* Maç satırındaki skor — büyük, yeşil, tabular (mobil dilin skor vurgusu). */
.m-row__score {
    flex: 0 0 auto; color: var(--lt-primary); font-weight: 700;
    font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* =============================================================================
   TANITIM KATMANI — "veri listesi" değil, tanıtım sitesi
   =============================================================================
   Ana sayfa doğrudan turnuva listesiyle açılıyordu. Kulüpler ve oyuncular için
   ilk izlenim burası: platformun NE OLDUĞU listeden önce anlatılmalı. Listeler
   kendi sayfalarına taşındı (/turnuvalar, /kulupler).

   Mobil öncelikli — public web'e telefondan girilecek; 390 px temel ölçüdür.
   ========================================================================== */

/* ------------------------------------------------------------ Gezinti (üst) */

.lt-header { gap: 12px; position: relative; }

/* ÖZGÜLLÜK ŞART: yukarıdaki `.lt-header nav { display: flex }` kuralı (sınıf +
   etiket) düz `.lt-nav`'dan güçlüdür. Düz yazıldığında menü 390 px'te GİZLENMEDİ
   ve sayfayı yatay taşırdı — ölçüldü. Aynı kapsam burada da kullanılır. */
.lt-header .lt-nav { display: none; }      /* mobilde gizli; hamburger açar */
.lt-header .lt-nav a { white-space: nowrap; }
.lt-header .lt-nav a.is-current { color: var(--lt-primary-dark); background: var(--lt-success-bg); }

/* Hamburger: <details> yerel olarak erişilebilir (klavye + ekran okuyucu) ve
   JavaScript KAPALIYKEN de çalışır. Menünün açılması betiğe bağlı olmamalı. */
.lt-burger { position: relative; }
.lt-burger > summary {
    list-style: none; cursor: pointer;
    width: 44px; height: 44px;             /* 44x44 asgari dokunma alanı */
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--lt-border); border-radius: var(--lt-r-control);
    background: var(--lt-surface); color: var(--lt-primary-dark);
}
.lt-burger > summary::-webkit-details-marker { display: none; }
.lt-burger[open] > summary { background: var(--lt-success-bg); }
.lt-burger__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 232px; padding: 8px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    display: flex; flex-direction: column; gap: 2px;
}
.lt-burger__panel a {
    padding: 12px; min-height: 44px; display: flex; align-items: center;
    border-radius: var(--lt-r-control);
    color: var(--lt-text); font-size: 15px; font-weight: 500;
}
.lt-burger__panel a:hover { background: var(--lt-bg); text-decoration: none; }
.lt-burger__panel a.is-current { color: var(--lt-primary-dark); background: var(--lt-success-bg); font-weight: 600; }
.lt-burger__panel .cta { background: var(--lt-primary); color: #fff; justify-content: center; margin-top: 6px; }
.lt-burger__panel .cta:hover { background: var(--lt-primary); filter: brightness(1.05); }

@media (min-width: 900px) {
    .lt-header .lt-nav { display: flex; align-items: center; gap: 2px; }
    .lt-burger { display: none; }
}

/* --------------------------------------------------------- Tanıtım hero'su */

.lt-mkt-hero {
    margin-top: 8px;
    border-radius: var(--lt-r-card);
    padding: 36px 22px 32px;
    background:
        radial-gradient(680px 320px at 12% -10%, #1D7A5C 0%, transparent 60%),
        linear-gradient(150deg, var(--lt-hero-1) 0%, #08241B 100%);
    color: #fff;
    display: grid; gap: 28px; align-items: center;
}
.lt-mkt-hero h1 {
    font-size: 32px; line-height: 1.14; letter-spacing: -.025em;
    margin: 12px 0 10px; color: #fff;
}
/* Marka renginin metindeki tek vurgusu — lime, LRS dilindeki "pozitif". */
.lt-mkt-hero h1 em { font-style: normal; color: var(--lt-lime); }
.lt-mkt-hero p { color: rgba(255,255,255,.80); font-size: 16px; line-height: 1.55; margin: 0; max-width: 48ch; }
.lt-mkt-hero .lt-hero__actions { justify-content: flex-start; margin-top: 22px; }
.lt-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(182, 245, 66, .14); border: 1px solid rgba(182, 245, 66, .32);
    color: var(--lt-lime); border-radius: 999px; padding: 6px 13px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
}

/* Hero görseli: telefon çerçevesi içinde uygulama ekranı. */
.lt-phone {
    /* 390 px ekranda 250 px genişlik 541 px yükseklik demekti ve sayı şeridini
       katlamanın çok altına itiyordu (ölçüldü). 200 px, maketi tanınır bırakıp
       ilk ekranda kanıtı da gösterir. */
    width: 100%; max-width: 200px; margin: 0 auto;
    aspect-ratio: 390 / 844;
    border-radius: 30px; padding: 8px;
    background: linear-gradient(160deg, #0F4433, #061A14);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.lt-phone__screen {
    width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
    background: var(--lt-bg); display: flex; align-items: center; justify-content: center;
}
.lt-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* YER TUTUCU: gerçek ekran görüntüsü gelene kadar. Boş kutu bırakmak yerine
   NE BEKLENDİĞİNİ yazar — eksik varlık böylece gözden kaçmaz. */
.lt-shot-todo {
    width: 100%; height: 100%; padding: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    background: repeating-linear-gradient(45deg, #EEF3F0, #EEF3F0 10px, #E6EDE9 10px, #E6EDE9 20px);
    color: var(--lt-text-2);
}
.lt-shot-todo b { color: var(--lt-primary-dark); font-size: 13px; }
.lt-shot-todo span { font-size: 11.5px; line-height: 1.4; }

/* ============ HERO MAKETİ MOBİLDE YOK ============
   ÖLÇÜLDÜ (390x844): telefon çerçevesi 433 px yükseklik kaplıyor ve sayı
   şeridini katlamanın altına itiyordu — ilk ekranda yalnız hero kalıyordu.

   Üstelik telefonda telefon çerçevesi göstermek fazlalık: ziyaretçi zaten
   uygulamanın çalışacağı cihazda. Geniş ekranda ise maket bağlamı kurar,
   orada kalır. /uygulama sayfasındaki ekran görüntüsü bölümü mobilde DURUR —
   orada amaç zaten ekranları göstermek. */
.lt-mkt-hero .lt-phone { display: none; }

@media (min-width: 900px) {
    .lt-mkt-hero .lt-phone { display: block; }
    .lt-mkt-hero { grid-template-columns: 1.15fr .85fr; padding: 52px 44px; }
    .lt-mkt-hero h1 { font-size: 46px; }
    /* 288 px genişlik 623 px yükseklik demekti ve hero'yu gereksiz uzatıyordu
       (ölçüldü). 244 px, telefonu tanınır bırakırken hero'yu ekranda tutar. */
    .lt-phone { max-width: 244px; }
}

/* ------------------------------------------------------------ Sayı şeridi */

.lt-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin-top: 14px;
}
.lt-stats__item {
    background: var(--lt-surface); border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card); box-shadow: var(--lt-shadow);
    padding: 16px; text-align: center;
}
.lt-stats__item b {
    display: block; font-size: 30px; font-weight: 700; line-height: 1.1;
    color: var(--lt-primary-dark); font-variant-numeric: tabular-nums;
}
.lt-stats__item span { font-size: 12.5px; color: var(--lt-text-2); }
@media (min-width: 720px) { .lt-stats { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------- Bölüm başlığı (orta) */

.lt-lede { text-align: center; margin: 46px auto 20px; max-width: 60ch; }
.lt-lede h2 { font-size: 25px; letter-spacing: -.02em; margin: 0 0 8px; }
.lt-lede p { color: var(--lt-text-2); margin: 0; font-size: 15px; line-height: 1.55; }
@media (min-width: 720px) { .lt-lede h2 { font-size: 30px; } }

/* --------------------------------------------------------- Özellik kartları */

.f-card {
    background: var(--lt-surface); border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card); box-shadow: var(--lt-shadow);
    padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.f-card__icon {
    width: 46px; height: 46px; border-radius: var(--lt-r-control);
    background: var(--lt-success-bg); color: var(--lt-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.f-card__icon svg { width: 24px; height: 24px; }
.f-card h3 { font-size: 16.5px; margin: 0; color: var(--lt-text); }
.f-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lt-text-2); }

/* Kulüp bloğu koyu: kulüp yöneticisi ayrı bir muhatap, sayfada ayrı bir yüzey. */
.lt-clubs-cta {
    margin: 46px 0 8px; border-radius: var(--lt-r-card); padding: 28px 22px; color: #fff;
    background:
        radial-gradient(620px 260px at 88% 0%, #1B6E53 0%, transparent 62%),
        linear-gradient(150deg, var(--lt-hero-1) 0%, #08241B 100%);
}
.lt-clubs-cta h2 { color: #fff; font-size: 25px; margin: 10px 0 8px; letter-spacing: -.02em; }
.lt-clubs-cta > p { color: rgba(255,255,255,.80); font-size: 15px; line-height: 1.55; margin: 0; max-width: 56ch; }
.lt-clubs-cta .lt-grid { margin-top: 22px; }
/* Başlık ve metin sola dayalı; düğmeler ortada kalırsa blok iki hizalı görünür.
   .lt-hero__actions varsayılanı ortalıdır — burada bilinçli olarak ezilir. */
.lt-clubs-cta .lt-hero__actions { justify-content: flex-start; }
.lt-clubs-cta .f-card {
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none;
}
.lt-clubs-cta .f-card h3 { color: #fff; }
.lt-clubs-cta .f-card p { color: rgba(255,255,255,.72); }
.lt-clubs-cta .f-card__icon { background: rgba(182,245,66,.14); color: var(--lt-lime); }
@media (min-width: 720px) { .lt-clubs-cta { padding: 40px 36px; } .lt-clubs-cta h2 { font-size: 30px; } }

/* ------------------------------------------------------- Mağaza rozetleri */

.lt-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lt-store {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 8px 18px;
    border-radius: var(--lt-r-control);
    background: #fff; color: var(--lt-text);
    border: 1px solid var(--lt-border); box-shadow: var(--lt-shadow);
}
.lt-store:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(16,24,40,.12); }
.lt-store svg { width: 24px; height: 24px; flex: 0 0 24px; }
.lt-store span { display: block; font-size: 10.5px; color: var(--lt-text-2); line-height: 1.2; }
.lt-store b { display: block; font-size: 15px; line-height: 1.2; }
/* HENÜZ YAYINDA DEĞİL: bağlantı gibi görünüp hiçbir yere gitmeyen düğme,
   olmayan düğmeden kötüdür. Durum açıkça yazılır. */
.lt-store.is-soon { opacity: .58; cursor: default; box-shadow: none; }
.lt-store.is-soon:hover { box-shadow: none; }

/* ------------------------------------------------------------- Adım listesi */

.lt-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.lt-steps li {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--lt-surface); border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card); box-shadow: var(--lt-shadow); padding: 16px;
}
.lt-steps b {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px;
    background: var(--lt-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-variant-numeric: tabular-nums;
}
.lt-steps h3 { margin: 0 0 3px; font-size: 15.5px; }
.lt-steps p { margin: 0; font-size: 14px; color: var(--lt-text-2); line-height: 1.5; }

/* ------------------------------------------------------------- İletişim */

.lt-contact-card {
    background: var(--lt-surface); border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card); box-shadow: var(--lt-shadow); padding: 20px;
    display: flex; flex-direction: column; gap: 6px;
}
.lt-contact-card h3 { margin: 0; font-size: 16px; }
.lt-contact-card p { margin: 0; font-size: 14px; color: var(--lt-text-2); line-height: 1.5; }
.lt-contact-card a.mail {
    margin-top: 6px; font-weight: 600; font-size: 15px;
    min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Alt bilgi */

.lt-footer {
    display: grid; gap: 22px; align-items: start;
    margin-top: 48px; padding-top: 26px;
    border-top: 1px solid var(--lt-border);
}
.lt-footer__brand { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lt-footer__brand p { margin: 0; font-size: 13.5px; color: var(--lt-text-2); max-width: 34ch; line-height: 1.5; }
.lt-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lt-footer__col h4 {
    margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--lt-text-2); font-weight: 600;
}
.lt-footer__col a {
    display: flex; align-items: center; min-height: 40px;
    font-size: 14px; color: var(--lt-text-2);
}
.lt-footer__col a:hover { color: var(--lt-primary-dark); }
.lt-footer__legal {
    grid-column: 1 / -1; border-top: 1px solid var(--lt-border); padding-top: 16px;
    font-size: 12.5px; color: var(--lt-text-2);
    display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
@media (min-width: 760px) {
    .lt-footer { grid-template-columns: 1.1fr 2fr; gap: 32px; }
    .lt-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------- İç sayfa başlığı (sade) */

.lt-pagehero { padding: 30px 22px; text-align: left; }
.lt-pagehero h1 { font-size: 28px; margin: 0 0 8px; color: #fff; letter-spacing: -.02em; }
.lt-pagehero p { color: rgba(255,255,255,.78); margin: 0; font-size: 15px; line-height: 1.55; max-width: 56ch; }
@media (min-width: 720px) { .lt-pagehero { padding: 44px 36px; } .lt-pagehero h1 { font-size: 36px; } }

/* ------------------------------------------------------------------ Destek */

/* AÇILIR BAŞLIK BETİKSİZ: <details>/<summary> yerel olarak açılır, klavye ve
   ekran okuyucu desteğini kendisi getirir. Hamburger menüde de aynı teknik
   kullanılıyor; sitenin tamamı JavaScript'siz çalışır. */

.lt-faq__title { margin: 22px 0 10px; font-size: 20px; }

.lt-faq { display: grid; gap: 10px; }

.lt-faq > details {
    background: var(--lt-surface); border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-card); box-shadow: var(--lt-shadow);
    overflow: hidden;
}

.lt-faq > details > summary {
    /* 44 px DOKUNMA ALANI: sayfaya ağırlıkla telefondan giriliyor. */
    min-height: 44px; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; cursor: pointer;
    font-weight: 600; font-size: 15.5px; color: var(--lt-text);
    list-style: none;
}

/* Tarayıcının kendi üçgeni gizlenir; yerine her iki motorda da aynı görünen
   bir işaret konur. */
.lt-faq > details > summary::-webkit-details-marker { display: none; }
.lt-faq > details > summary::after {
    content: "+"; margin-left: auto; font-size: 20px; line-height: 1;
    color: var(--lt-text-2); flex: none;
}
.lt-faq > details[open] > summary::after { content: "–"; }
.lt-faq > details[open] > summary { background: var(--lt-success-bg); color: var(--lt-primary-dark); }

.lt-faq > details > summary:focus-visible {
    outline: 2px solid var(--lt-primary); outline-offset: -2px;
}

.lt-faq__body { padding: 4px 16px 16px; border-top: 1px solid var(--lt-border); }
.lt-faq__body p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lt-text-2); }
.lt-faq__body p.muted { font-size: 13px; }
.lt-faq__body ol { margin: 10px 0 0; padding-left: 20px; }
.lt-faq__body li { font-size: 14.5px; line-height: 1.6; color: var(--lt-text-2); margin-bottom: 6px; }
.lt-faq__body strong { color: var(--lt-text); }
