:root {
    --renk-ana: #1f2937;
    --renk-vurgu: #2563eb;
    --renk-vurgu-koyu: #1d4ed8;
    --renk-arkaplan: #f5f6f8;
    --renk-kart: #ffffff;
    --renk-kenar: #e2e5ea;
    --renk-metin: #1f2937;
    --renk-metin-soluk: #6b7280;
    --renk-basari: #16a34a;
    --renk-tehlike: #dc2626;
    --renk-uyari: #d97706;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--renk-arkaplan);
    color: var(--renk-metin);
}

a { color: var(--renk-vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
    position: relative;
    width: 220px;
    background: var(--renk-ana);
    color: #fff;
    padding: 20px 0;
    flex-shrink: 0;
}
.sidebar h1 { font-size: 16px; padding: 0 20px 16px; margin: 0; border-bottom: 1px solid #374151; }
.sidebar nav { margin-top: 16px; }
.sidebar nav a {
    display: block;
    padding: 10px 20px;
    color: #d1d5db;
}
.sidebar nav a:hover, .sidebar nav a.aktif {
    background: #374151;
    color: #fff;
    text-decoration: none;
}
.sidebar-kapat {
    display: none;
    position: absolute;
    top: 14px;
    right: 12px;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 2;
}

/* Masaüstünde akordeon olarak açılıp kapanan menü grupları (Finans / İletişim / Ayarlar) */
.nav-grup { margin-top: 4px; }
.nav-grup-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: #d1d5db;
    font: inherit;
    padding: 10px 20px;
    cursor: pointer;
    text-align: left;
}
.nav-grup-baslik:hover { background: #374151; color: #fff; }
.nav-ok { font-size: 11px; transition: transform 0.15s ease; }
.nav-grup.acik .nav-ok { transform: rotate(180deg); }
.nav-grup-icerik { display: none; }
.nav-grup.acik .nav-grup-icerik { display: block; }
.nav-grup-icerik a { padding-left: 34px; font-size: 13px; }

/* Mobilde gizli, sadece sidebar taşınabilir (drawer) hale geldiğinde kullanılan karartma katmanı */
.sidebar-arkaplan { display: none; }

/* Mobilde görünen alt sekme çubuğu (Instagram tarzı) — masaüstünde gizli */
.alt-menu { display: none; }

/* iOS PWA'da (ana ekrana eklenmiş, "standalone" modda) sayfa durum çubuğunun (saat/pil/sinyal)
   ARKASINA kayar — .main'in üst boşluğu bunu sadece sayfa ilk açıldığında engeller, aşağı
   kaydırınca herhangi bir içerik (özellikle bir üye fotoğrafı gibi görsel bir öğe) o bandın
   altına gelip durum çubuğuyla çirkin biçimde çakışabilir. Bunu her zaman (sadece ilk açılışta
   değil) engellemek için durum çubuğunun tam arkasına, sayfa arkaplanıyla aynı renkte, sabit
   (fixed) ince bir şerit koyup içeriğin ÜSTÜNE bindiriyoruz — böylece altından kayan hiçbir şey
   görünmez. Standalone/notch olmayan durumlarda env(safe-area-inset-top) 0 olduğundan bu şerit
   yükseksiz/görünmez kalır, hiçbir sayfayı etkilemez.
*/
.durum-cubugu-orten {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--renk-arkaplan);
    z-index: 2000;
    pointer-events: none;
}

.main { flex: 1; padding: 24px 32px; max-width: 1100px; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.topbar .kullanici { font-size: 14px; color: var(--renk-metin-soluk); }

.kart {
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    overflow-x: auto;
}

/* Üye detayı (Aikido/Pilates) sayfalarının en üstündeki "Aylık ücret / Süre bitiş
   tarihi / Borç / Vize / Aktif-Pasif" gibi bilgilerin yan yana dizildiği özet şeridi.
   Önceden flex-wrap tanımlı değildi — dar ekranda .kart'ın overflow-x:auto'su devreye
   girip yatay kaydırma gerektiriyordu ("ekrana sığmıyor"). flex-wrap:wrap ile artık
   sığmayan öğeler alt satıra geçiyor, kaydırmaya gerek kalmıyor. */
.ozet-satiri {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenar); font-size: 14px; }
th { color: var(--renk-metin-soluk); font-weight: 600; }
tr:hover td { background: #fafafa; }

.form-grup { margin-bottom: 14px; }
.form-grup label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-grup input, .form-grup select, .form-grup textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    font-size: 14px;
}
.form-satir { display: flex; gap: 14px; }
.form-satir .form-grup { flex: 1; }

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: none;
    background: var(--renk-vurgu);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.btn:hover { background: var(--renk-vurgu-koyu); text-decoration: none; }
.btn-ikincil { background: #e5e7eb; color: var(--renk-metin); }
.btn-ikincil:hover { background: #d1d5db; }
.btn-tehlike { background: var(--renk-tehlike); }
.btn-tehlike:hover { background: #b91c1c; }

.rozet { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; margin: 2px 6px 2px 0; white-space: nowrap; }

.uye-telefon-ikon { display: inline-flex; gap: 6px; margin-left: 8px; }
.uye-telefon-ikon a { text-decoration: none; font-size: 15px; padding: 2px; }

/* Ders Akışı — tek satır tarih şeridi (önceki/sonraki ok + ortada tıklanabilir gün/tarih) */
.tarih-seridi { position: relative; display: flex; align-items: center; gap: 10px; }
.tarih-serit-ok {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--renk-arkaplan);
    border: 1px solid var(--renk-kenar);
    color: var(--renk-metin);
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}
.tarih-serit-ok:hover { background: var(--renk-kenar); }
.tarih-serit-orta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
}
.tarih-serit-orta:hover { background: var(--renk-arkaplan); }
.tarih-serit-gun { font-weight: 600; font-size: 15px; }
.tarih-serit-tarih { font-size: 13px; color: var(--renk-metin-soluk); }
.tarih-serit-gizli-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.tarih-serit-bugune-don { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--renk-vurgu); text-decoration: none; }
.tarih-serit-bugune-don:hover { text-decoration: underline; }
/* Tarih şeridinin altındaki alan (Bugüne dön + Hoca filtresi) — üstteki ortalı şeritle aynı dili sürdürür */
.tarih-serit-alt-alan { text-align: center; margin-top: 14px; }

/* Ders Akışı — Hoca filtresi: ikonlu bir "hap", dokununca native seçim listesi açılıp otomatik gönderiyor */
.ders-hoca-secim-saran {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--renk-arkaplan);
    border: 1px solid var(--renk-kenar);
    border-radius: 999px;
    padding: 7px 26px 7px 30px;
}
.ders-hoca-ikon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.ders-hoca-secim {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--renk-metin);
    cursor: pointer;
    padding: 0;
    max-width: 170px;
}
.ders-hoca-secim:focus { outline: none; }
.ders-hoca-secim-saran:focus-within { outline: 2px solid var(--renk-vurgu); outline-offset: 1px; }
.ders-hoca-secim-saran .ders-durum-ok { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 9px; pointer-events: none; }

/* Ders Akışı — Pilates "Durum" rozeti aynı zamanda bir <select>: dokununca tarayıcının
   kendi (native) seçim listesi açılıyor, bir seçenek işaretlenince otomatik gönderiliyor. */
.ders-durum-secim-saran { position: relative; display: inline-block; }
.ders-durum-secim {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    cursor: pointer;
    padding-right: 20px;
    font: inherit;
}
.ders-durum-secim:focus { outline: 2px solid var(--renk-vurgu); outline-offset: 1px; }
.ders-durum-secim-saran .ders-durum-ok {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    pointer-events: none;
}

.rozet-aikido { background: #dbeafe; color: #1e40af; }
.rozet-pilates { background: #fce7f3; color: #9d174d; }
.rozet-aktif { background: #dcfce7; color: #166534; }
.rozet-pasif { background: #fee2e2; color: #991b1b; }
.rozet-uyari { background: #fef3c7; color: #92400e; }
.rozet-planlandi { background: #e0e7ff; color: #3730a3; }

.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.flash-basari { background: #dcfce7; color: #166534; }
.flash-hata { background: #fee2e2; color: #991b1b; }
.flash-uyari { background: #fef3c7; color: #92400e; }

.giris-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--renk-arkaplan);
}
.giris-kutu {
    width: 340px;
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: 32px;
}
.giris-kutu h1 { font-size: 18px; margin: 0 0 20px; text-align: center; }

.arac-cubugu { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.arama-kutu input { padding: 8px 10px; border: 1px solid var(--renk-kenar); border-radius: var(--radius); width: 260px; }

.bos-durum { text-align: center; color: var(--renk-metin-soluk); padding: 40px 0; }

/* Anasayfa (dashboard) marka bandı — sadece Panel'de, bir kerelik karşılama/kimlik dokunuşu */
.panel-marka-banner {
    background: linear-gradient(135deg, var(--renk-ana), var(--renk-vurgu));
    color: #fff;
    border-radius: var(--radius);
    padding: 28px 20px;
    margin-bottom: 20px;
    text-align: center;
}
.panel-marka-adi { font-size: 26px; font-weight: 800; letter-spacing: 3px; }
.panel-marka-slogan { font-size: 12px; letter-spacing: 4px; color: rgba(255,255,255,0.75); margin-top: 4px; }

/* Anasayfa (dashboard) istatistik kutucukları — tıklanabilir, ilgili sayfaya götürür */
.istatistik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.istatistik-kutu {
    display: block;
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: 18px 20px;
    color: var(--renk-metin);
}
.istatistik-kutu:hover { border-color: var(--renk-vurgu); text-decoration: none; }
.istatistik-kutu .deger { font-size: 28px; font-weight: 700; }
.istatistik-kutu .etiket { font-size: 13px; color: var(--renk-metin-soluk); margin-top: 2px; }
.istatistik-kutu.istatistik-uyari .deger { color: var(--renk-uyari); }
.istatistik-kutu.istatistik-tehlike .deger { color: var(--renk-tehlike); }

/* Üye işlem sayfalarında (Aikido/Pilates detay) sayfa ne kadar aşağı kaydırılırsa
   kaydırılsın hep görünür kalan, kompakt kimlik şeridi — yanlış üye üzerinde işlem
   yapma riskini azaltmak için. Bilinçli olarak ince tutuldu (mobilde yer çalmasın). */
.kimlik-seridi {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: 8px 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.kimlik-seridi-foto {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.kimlik-seridi-foto-yer-tutucu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--renk-vurgu);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.kimlik-seridi-ad { font-weight: 700; font-size: 15px; }

/* Öğrenci paneli — mobil öncelikli, sidebar'sız basit üst bar */
.ogrenci-topbar {
    background: var(--renk-ana);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ogrenci-topbar .marka { font-size: 15px; font-weight: 700; }
.ogrenci-topbar .kullanici { font-size: 12px; opacity: 0.85; }
.ogrenci-topbar .kullanici a { color: #fff; text-decoration: underline; }

.ogrenci-nav {
    display: flex;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--renk-kenar);
    padding: 0 12px;
    overflow-x: auto;
}
.ogrenci-nav a {
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.ogrenci-nav a:hover { text-decoration: none; }
.ogrenci-nav a.aktif { color: var(--renk-vurgu); border-bottom-color: var(--renk-vurgu); }

.ogrenci-main { max-width: 640px; margin: 0 auto; padding: 16px; }

/* Kart çerçevesi olmadan, sayfa gövdesinde doğrudan duran küçük bölüm
   etiketleri (örn. Özet sayfasında "AIKIDO"/"PİLATES") — onaylanan öğrenci
   paneli mockup'ından (28 Ağustos 2026). */
.baslik-kucuk { font-size: 12px; font-weight: 700; color: var(--renk-metin-soluk); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 10px; }

/* Etiket solda / değer sağda basit bilgi satırı (örn. "Son Aldığınız Paket"
   kartındaki Tarih/Ders Sayısı/Hoca satırları). */
.paket-satir { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
.paket-satir span:first-child { color: var(--renk-metin-soluk); }

.ozet-satir { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ozet-kutu {
    flex: 1;
    min-width: 130px;
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
}
.ozet-kutu .deger { font-size: 22px; font-weight: 700; }
.ozet-kutu .etiket { font-size: 12px; color: var(--renk-metin-soluk); margin-top: 2px; }

/* Aikido üyelik durumu widget'ı — bitiş tarihine az kaldığında yumuşak bir vurgu
   (bkz. proje dokümanı §9.1). Hareketten rahatsız olan kullanıcılar için
   prefers-reduced-motion'da yanıp sönme devre dışı kalır, renk vurgusu kalır. */
.ozet-kutu-uyari { border-color: var(--renk-uyari); }
.ozet-kutu-uyari .deger { color: var(--renk-uyari); }
@media (prefers-reduced-motion: no-preference) {
    .ozet-kutu-uyari { animation: uyariYanipSon 2.4s ease-in-out infinite; }
}
@keyframes uyariYanipSon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.kopyala-satir { display: flex; gap: 8px; align-items: center; }
.kopyala-satir input { flex: 1; padding: 8px 10px; border: 1px solid var(--renk-kenar); border-radius: var(--radius); font-size: 12px; background: #f9fafb; }

/* Öğrenci panelinde, o yılın vizesi henüz yapılmamışsa üstte gösterilen
   uyarı bandı (Faz 15) — Google AdWords'ün "ödeme sorunu" bandına benzer,
   hangi sekmede olunursa olunsun görünür kalır. */
.vize-bandi {
    background: #fef3c7;
    color: #92400e;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* Faz 29 — "Öğrenci gibi görüntüle": admin bir üyenin panelini görüntülerken üstte
   her zaman görünen, kaçırılamayacak bir şerit (bilinçli olarak vize-bandi'nden
   farklı, koyu bir renk — bu bir uyarı değil, "şu an yönetici modundasın" bildirimi). */
.yonetici-goruntuleme-seridi {
    background: #312e81;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.yonetici-goruntuleme-seridi a {
    color: #ffffff;
    text-decoration: underline;
}

/* Vize sayfasındaki toplu işlem tablosunda kullanılan küçük yuvarlak avatar. */
.vize-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.vize-avatar-yer-tutucu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--renk-vurgu);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

/* ÖNEMLİ: Bu mobil @media bloğu bilinçli olarak dosyanın EN SONUNA kondu.
   Aynı isimli (.main, .arac-cubugu, .form-satir vb.) koşulsuz kurallar
   dosyanın başka yerlerinde de var — CSS'te eşit özgüllükte (specificity)
   iki kural çakışırsa DOSYADA SONRA gelen kazanır, @media içinde olması
   bunu değiştirmez. Bu blok daha önce yanlışlıkla dosyanın ortasına
   (ilgili koşulsuz kurallardan ÖNCE) konmuştu, bu yüzden örn. .main'in
   mobildeki alt boşluğu hiç uygulanmıyordu (koşulsuz .main kuralı onu
   sessizce eziyordu) — 4 Eylül 2026'da bu yüzden buraya taşındı. Yeni bir
   mobil override eklerken bunu da EN SONA eklemeye devam edin. */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 82vw;
        z-index: 1100;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .sidebar.acik { transform: translateX(0); }
    .sidebar-kapat { display: block; }

    .sidebar-arkaplan {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .sidebar-arkaplan.acik { opacity: 1; pointer-events: auto; }

    .main { padding: calc(16px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)); max-width: 100%; }

    .alt-menu {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--renk-ana);
        border-top: 1px solid #374151;
        z-index: 1000;
        padding: 10px 4px calc(12px + env(safe-area-inset-bottom));
    }
    .alt-menu a, .alt-menu-daha-fazla {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-size: 11px;
        color: #9ca3af;
        background: none;
        border: none;
        padding: 6px 2px;
        cursor: pointer;
        text-decoration: none;
    }
    .alt-menu a.aktif { color: #fff; }
    /* Faz 105 — yazarken (klavye açık) alt menü gizli; JS: includes/header.php */
    body.klavye-acik .alt-menu { display: none; }
    .alt-menu-ikon { font-size: 22px; line-height: 1; }

    /* Bir satırda yan yana dizilen form alanları (ör. "Sabit Randevu Ekle") dar ekranda
       sıkışıp üst üste binmesin diye alt alta yığılıyor.
       ÖNEMLİ: bazı formlarda (ör. "Sabit Randevu Ekle", "Grup Ata", "Hesap Oluştur")
       satır masaüstünde düzgün görünsün diye inline style="align-items:flex-end" kullanılıyor —
       flex-direction row iken bu dikey (cross-axis) hizalamayı etkiler, ama column'a
       döndüğümüzde cross-axis YATAY olur ve aynı flex-end değeri alanları sağa yasladığı
       için dar ekranda çarpık/dağınık görünür. Inline style her zaman kazandığından
       burada !important ile eziyoruz — masaüstünü etkilemez, sadece bu medya sorgusunun
       içinde geçerli.
    */
    .form-satir {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }
    .form-satir .form-grup {
        flex: 0 0 auto;
        margin-bottom: 0;
        width: 100%;
    }
    .form-satir > button,
    .form-satir > .btn {
        width: 100%;
    }

    /* Yan yana duran birden fazla .btn (ör. "Kaydet"/"Listeye Dön", ya da ayrı
       <form style="display:inline"> içine sarılmış "Yeni Aktivasyon Linki Oluştur" /
       "Öğrenci Gibi Görüntüle" butonları) dar ekranda sığmayıp alt satıra kayınca,
       aralarında hiç dikey boşluk olmadığından üst üste binmiş gibi bitişik görünüyordu.
       .btn inline-block olduğu için dikey margin gerçekten uygulanıyor — kaydığı satırlar
       arasına görünür bir boşluk koyuyoruz. */
    .btn {
        margin-bottom: 8px;
    }

    /* Arama kutusu + "Yeni Ekle" butonu yan yana sıkışıp birbirine giriyordu —
       dar ekranda alt alta, her biri tam genişlikte diziliyor */
    .arac-cubugu {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .arama-kutu, .arama-kutu input { width: 100%; }

    /* Üye detayı özet şeridi (Aylık ücret/Süre bitiş/Borç/Vize/Aktif-Pasif) alt alta
       geçtiğinde masaüstündeki 32px'lik yatay boşluk gereğinden fazla kalıyor —
       dar ekranda satırlar arası daha sıkı, kendi içindeki öğeler arası biraz daha
       geniş bir boşlukla daha derli toplu duruyor. */
    .ozet-satiri {
        gap: 18px 28px;
    }

    /* Panel/Ders Akışı/Üyeler/WhatsApp Mesajları zaten alt menüde (alt-menu) var —
       "Daha Fazla" çekmecesinde (yan menünün mobildeki hali) tekrar göstermeye gerek yok */
    .sidebar .menu-alt-cubukta-var { display: none; }

    /* Kopyalanabilir link kutusu + yanındaki buton (ör. "Aktivasyon linki") dar ekranda
       sıkışıp birbirine giriyordu — alt alta, tam genişlikte diziliyor */
    .kopyala-satir { flex-direction: column; align-items: stretch; }
    .kopyala-satir input { width: 100%; }
}

/* Dokunmatik ekranlarda (telefon/tablet) yazı kutularına dokununca iPhone Safari, yazı 16px'ten küçükse sayfayı
   kendiliğinden yakınlaştırır; sayfa büyüyünce "Gönder" gibi düğmeler ekran dışında kalıyordu (WhatsApp yanıt kutusu).
   Çözüm: dokunmatik cihazda tüm metin giriş alanları en az 16px. Masaüstünde hiçbir şey değişmez.
   Satır içi (style="font-size:13px") yazılmış boyutları da geçebilmek için !important. */
@media (pointer: coarse) {
    input:not([type]),
    input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="url"],
    input[type="password"], input[type="number"], input[type="date"], input[type="time"],
    input[type="datetime-local"], input[type="month"], input[type="week"],
    select, textarea {
        font-size: 16px !important;
    }
}