/*
 * AG Akademi — panel stili (admin + üye alanı ortak)
 *
 * NEDEN AYRI DOSYA: Ana sitenin style.css (407 KB) + plugins.css (220 KB)
 * dosyalarının ölçülen kullanım oranı %6-11. Panel bunları taşımaz;
 * burada yalnızca gerçekten kullanılan ~10 KB stil bulunur.
 * Bootstrap de yüklenmez — ihtiyaç duyulan grid/kart/form elle yazılmıştır.
 */

:root {
    --marka: #008080;          /* logodan örneklendi */
    --marka-koyu: #005757;
    --vurgu: #f78a44;
    --vurgu-koyu: #e06f26;     /* turuncu düğmelerin hover hâli */
    --metin: #22292f;
    --soluk: #6b7683;
    --cizgi: #e3e8ee;
    --zemin: #f5f7fa;
    --kart: #ffffff;
    --hata: #c62828;
    --basari: #2e7d32;
}

* { box-sizing: border-box; }

body.panel-body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Üst bar ---------- */
/* Zemin tam genişlikte, içerik .panel-ic ile ortalanır — logo/menü ile sayfa
   içeriği aynı kolona otursun diye. Ayrıntı için .panel-ic kuralına bak. */
.panel-topbar {
    height: 60px;
    background: var(--marka); color: #fff;
}
.panel-topbar .panel-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; height: 100%;
}
.panel-brand { color: #fff; text-decoration: none; font-size: 18px; font-weight: 600; }
.panel-brand span { font-weight: 300; opacity: .85; }
.panel-user { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.panel-user form { margin: 0; }
.btn-link {
    background: none; border: 0; color: #fff; cursor: pointer;
    text-decoration: underline; font-size: 14px; padding: 0;
}

/* ---------- Yerleşim ---------- */
/* ORTAK KOLON: üst bar, menü ve içerik aynı max-width + yatay dolguyu
   paylaşır. Daha önce üst bar ve menü tam genişlikte 24px dolguyla
   duruyordu; geniş ekranda menü sol kenara yapışıp içerikle hizasız
   kalıyordu. Değer değişirse ÜÇÜ birden buradan değişsin diye tek kural. */
.panel-ic { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.panel-main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
h1.sayfa-baslik { font-size: 22px; margin: 0 0 22px; font-weight: 600; }
/* Listeler sayfasında bölüm başlığı — araç çubuğu içinde düğmeyle aynı
   satırda durduğu için kendi dikey boşluğu sıfırlanıyor. */
h2.liste-baslik { font-size: 17px; font-weight: 600; margin: 0; }

/* ---------- Kartlar / istatistik ---------- */
.kart {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: 8px; padding: 20px;
}
.istatistik-grid {
    display: grid; gap: 16px; margin-bottom: 28px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.istatistik .sayi { font-size: 30px; font-weight: 600; color: var(--marka); line-height: 1.1; }
.istatistik .etiket { color: var(--soluk); font-size: 13px; margin-top: 4px; }

/* ---------- Giriş ekranı ---------- */
.giris-sarmal {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.giris-kutu { width: 100%; max-width: 380px; }
.giris-kutu .logo { text-align: center; margin-bottom: 22px; }
.giris-kutu .logo strong { display: block; font-size: 21px; color: var(--marka); }
.giris-kutu .logo span { color: var(--soluk); font-size: 13px; }

/* ---------- Form ---------- */
.alan { margin-bottom: 16px; }
.alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.alan input[type=text], .alan input[type=email], .alan input[type=password],
.alan input[type=tel], .alan select, .alan textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--cizgi);
    border-radius: 6px; font-size: 15px; font-family: inherit; background: #fff;
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
    outline: none; border-color: var(--marka); box-shadow: 0 0 0 3px rgba(0, 128, 128, .12);
}
.onay { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* inline-flex + ortalama: <a class="btn"> etiketleri, sabit yükseklik
   verildiğinde içeriğini dikeyde ORTALAMIYOR (metin üste yapışıyor).
   <button> kendiliğinden ortalar, <a> ortalamaz — bu yüzden ikisinin
   davranışı ayrışıyordu. flex ile her ikisi de aynı şekilde ortalanır. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border: 0; border-radius: 6px;
    background: var(--marka); color: #fff; font-size: 15px; font-weight: 500;
    cursor: pointer; text-decoration: none; font-family: inherit;
    white-space: nowrap;
}
.btn:hover { background: var(--marka-koyu); }
.btn-tam { width: 100%; display: flex; }

/* ---------- Bildirimler ---------- */
.uyari { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
.uyari ul { margin: 0; padding-left: 18px; }
.uyari-hata { background: #fdecea; color: var(--hata); border: 1px solid #f5c6c2; }
.uyari-basari { background: #e8f5e9; color: var(--basari); border: 1px solid #c3e6c8; }

/* ---------- Panel navigasyonu ---------- */
/* Menü zemini tam genişlikte, bağlantılar .panel-ic ile içerikle hizalı */
.panel-nav { background: var(--marka-koyu); }
.panel-nav .panel-ic { display: flex; gap: 4px; flex-wrap: wrap; }
.panel-nav a {
    color: rgba(255,255,255,.82); text-decoration: none; padding: 11px 14px;
    font-size: 14px; border-bottom: 3px solid transparent;
}
.panel-nav a:hover { color: #fff; }
.panel-nav a.aktif { color: #fff; border-bottom-color: var(--vurgu); font-weight: 500; }

/* ---------- Tablo ---------- */
.tablo-sarmal { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; background: var(--kart); font-size: 14px; }
table.tablo th, table.tablo td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
table.tablo th { background: #f0f3f7; font-weight: 600; font-size: 13px; white-space: nowrap; }
table.tablo tr:last-child td { border-bottom: 0; }
table.tablo tr:hover td { background: #fafbfc; }
td.sagda, th.sagda { text-align: right; white-space: nowrap; }

/* ---------- Rozet ---------- */
.rozet { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; line-height: 1.6; }
.rozet-yesil { background: #e8f5e9; color: var(--basari); }
.rozet-gri   { background: #eceff1; color: var(--soluk); }
.rozet-turkuaz { background: #e0f2f1; color: var(--marka-koyu); margin: 1px 2px 1px 0; }

/* ---------- Araç çubuğu ---------- */
.arac-cubugu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
/* flex-wrap: dar ekranda ara+filtre+düğme üçlüsü sığmayınca alt satıra insin.
   Yoksa sayfa yatay kayıyordu (390px ekranda 411px'lik form → 45px taşma).
   Akademide form zaten kabına sığdığı için orada hiç devreye girmez. */
.arac-cubugu form { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.arac-cubugu input[type=text], .arac-cubugu select {
    padding: 8px 11px; border: 1px solid var(--cizgi); border-radius: 6px; font-size: 14px; font-family: inherit;
}
.bosluk { flex: 1; }

.btn-kucuk { padding: 6px 11px; font-size: 13px; }
/* Liste görünümündeki eylem düğmeleri (Düzenle/Sil/Şifre/Pasifleştir)
   ikincil işlemler; 13px -> 11px ile satırda daha az yer kaplıyorlar.
   Seçici yalnızca tablo hücrelerini kapsar — araç çubuğundaki Ara/Filtrele
   düğmesi 13px kalır. */
table.tablo td .btn { font-size: 11px; }
.btn-gri { background: #6b7683; }
.btn-gri:hover { background: #55606b; }
.btn-kirmizi { background: var(--hata); }
.btn-kirmizi:hover { background: #a11b1b; }
.satir-ici { display: inline; margin: 0; }

/* Form alt eylem çubuğu: Kaydet/Vazgeç kartın SAĞ alt köşesine yaslanır.
   Önce üç form sayfasında da satır içi style ile sola hizalıydı; ortak
   sınıfa taşındı ki tek yerden yönetilsin. flex-wrap dar ekran içindir —
   düğmeler alt satıra inse de sağda kalır. */
.form-eylem {
    display: flex; justify-content: flex-end; gap: 10px;
    flex-wrap: wrap; margin-top: 22px;
}

/* ---------- Form ızgarası ---------- */
.form-izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-izgara .tam-genislik { grid-column: 1 / -1; }
.yardim { font-size: 12px; color: var(--soluk); margin-top: 4px; }
.kategori-kutusu {
    display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    max-height: 210px; overflow-y: auto; border: 1px solid var(--cizgi);
    border-radius: 6px; padding: 12px; background: #fff;
}
.kategori-kutusu label { display: flex; align-items: center; gap: 7px; font-weight: 400; font-size: 14px; margin: 0; }

/* ---------- Sayfalama ---------- */
.sayfalama { margin-top: 18px; }
.sayfalama ul { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
    display: block; padding: 6px 11px; border: 1px solid var(--cizgi);
    border-radius: 5px; text-decoration: none; color: var(--metin); background: #fff; font-size: 14px;
}
/* Aktif sayfa: dolgulu teal. Şeffaf kenarlık + padding-box, dolgunun
   komşu beyaz kutularla aynı yükseklikte okunmasını sağlar — gerekçe için
   dosya sonundaki "DOLGU YÜKSEKLİĞİ" notuna bak. */
.sayfalama .active span {
    background: var(--marka); color: #fff;
    border-color: transparent; background-clip: padding-box;
}
.sayfalama .disabled span { color: #b6bec7; }

/* ---------- Küçük görsel önizleme ---------- */
.onizleme { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #e9edf1; display: block; }

/* ---------- Sistem kontrol ---------- */
.durum-ok { color: var(--basari); font-weight: 600; }
.durum-hata { color: var(--hata); font-weight: 600; }

/* ---------- İçerik kartları (akademi) ---------- */
.icerik-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.icerik-kart {
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
    text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s;
}
.icerik-kart:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
/* height:auto ŞART: HTML'deki width/height nitelikleri (DB'den gelen gerçek
   piksel ölçüleri) CSS'te yükseklik tanımlı değilse aspect-ratio'yu EZER.
   Webinar kapakları 1920x1080 olduğu için kartlar 1080px yüksekliğinde
   basılıyordu. height:auto ile oran yeniden söz sahibi oluyor. */
.icerik-kart .kapak {
    width: 100%; height: auto;
    aspect-ratio: 16/9; object-fit: cover;
    background: #dfe5ea; display: block;
}
.icerik-kart .govde { padding: 13px 15px 15px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.icerik-kart .baslik { font-size: 15px; font-weight: 600; line-height: 1.35; }
/* Etiketler kartın altına yaslanır; çok kategorili kartlarda alt satıra taşar.
   NOT: "Watched" rozeti kaldırıldı — aynı bilgi "My History" sayfasında zaten
   var, kartta tekrar etmesi gereksizdi. (.izlendi kuralı da silindi.) */
.icerik-kart .etiketler {
    margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}

/* ---------- Video oynatıcı ---------- */
.video-cerceve { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
.video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Filtre çipleri ---------- */
.cipler { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.cip {
    display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 13px;
    background: #fff; border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none;
}
.cip:hover { border-color: var(--marka); }
.cip.aktif { background: var(--marka); border-color: var(--marka); color: #fff; }

/* ---------- Başlangıç rehberi ---------- */
.adim-izgara { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.adim h3 { font-size: 16px; color: var(--marka-koyu); margin: 0 0 10px; }
.adim img { width: 100%; border-radius: 8px; display: block; background: #eef1f4; }

/* Getting Started: poster + tıkla oynat (2026-08-23).
   Animasyonlar 0,3–1,6 MB; hepsi baştan inmesin diye statik ilk kare
   gösteriliyor, animasyon tıklanınca yükleniyor. <button> kullanıldı ki
   klavyeyle de çalışsın — <div> olsaydı Tab ile erişilemezdi. */
.adim-gorsel { position: relative; display: block; width: 100%; padding: 0;
               border: 0; background: none; cursor: pointer; border-radius: 8px; }
.adim-gorsel .adim-oynat {
    position: absolute; inset: 0; margin: auto;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;                 /* tıklama düğmeye gitsin */
    transition: background .15s ease;
}
.adim-gorsel:hover .adim-oynat { background: var(--marka); }
.adim-gorsel.oynuyor .adim-oynat { display: none; }
.adim-gorsel:focus-visible { outline: 2px solid var(--marka); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .adim-gorsel .adim-oynat { transition: none; }
}

/* Sayfalama özeti ("Toplam 328 kayıttan 1–24 arası") */
.sayfalama nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sayfalama-ozet { margin: 0; font-size: 13px; color: var(--soluk); }
.sayfalama .disabled span { cursor: default; }

/* Webinar kartları: kapak görselleri fotoğraf olduğu için satırda 3 tane
   gösteriliyor — daha büyük ve okunur. (Classroom küçük resimleri ultrason
   kesitleri; onlar 4'lü ızgarada yeterince net.) */
.icerik-izgara.uc-sutun { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
    .icerik-izgara.uc-sutun { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .icerik-izgara.uc-sutun { grid-template-columns: 1fr; }
}

/* ---------- Webinar kartı: tarih, rozet, eylem düğmesi ---------- */
.bolum-baslik { font-size: 17px; margin: 0 0 14px; font-weight: 600; }

/* Kapak üstündeki "Upcoming" rozeti için konumlandırma bağlamı */
.kapak-sarmal { position: relative; }
.kapak-etiket {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.kapak-etiket-turuncu { background: var(--vurgu); }

.tarih-satiri {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--marka-koyu);
}
.tarih-ikon { font-size: 12px; }

.kart-alt { display: flex; align-items: center; gap: 8px; }
/* <a> içinde <button> olamaz; görsel olarak düğme gibi duran span */
.kart-btn {
    display: inline-block; padding: 6px 15px; border-radius: 4px;
    background: var(--marka); color: #fff; font-size: 13px; font-weight: 600;
    transition: background-color .18s ease;
}
.icerik-kart:hover .kart-btn { background: var(--marka-koyu); }
.kart-btn-turuncu { background: var(--vurgu); }
.icerik-kart:hover .kart-btn-turuncu { background: #e07730; }

/* ---------- Form kontrollerini hizala ----------
   SORUN: <select> yüksekliği işletim sistemine göre değişiyor — macOS'ta
   inputlardan kısa, Linux/headless'ta uzun görünüyordu. Yerel (native)
   select denetimi padding'i de her platformda aynı yorumlamıyor.
   ÇÖZÜM: appearance:none ile yerel görünümü kapat, sabit yükseklik ver ve
   açılır oku kendimiz çizelim. Böylece her yerde birebir aynı. */
.alan input[type=text],
.alan input[type=email],
.alan input[type=password],
.alan input[type=tel],
.alan input[type=file],
.alan select {
    height: 42px;
    line-height: normal;
}

.alan select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    /* Açılır ok: gömülü SVG (harici istek yok) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7683' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;   /* ok ile metin çakışmasın */
    cursor: pointer;
}

/* Dosya seçme alanı: yükseklik sabit olunca metin dikeyde ortalanmalı */
.alan input[type=file] { padding-top: 9px; }

/* Araç çubuğundaki filtre alanları da kendi içinde hizalı olsun */
.arac-cubugu input[type=text],
.arac-cubugu select,
.arac-cubugu .btn {
    height: 38px;
    line-height: normal;
}
.arac-cubugu select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7683' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 32px;
    cursor: pointer;
}

/* "Tümünü Göster" / "Show All" düğmesi — marka turuncusu.
   NOT: .btn sınıfı burada işe yaramıyor — `.sayfalama a` kuralı arka planı
   beyaza çeviriyor ve düğme sayfa numaralarından ayrışmıyordu. Bu yüzden
   kendi sınıfı var. Turuncu, sayfa numaralarının arasından net ayrışıyor. */
.sayfalama .sayfalama-tumu {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 14px; border-radius: 5px;
    color: #fff; font-size: 14px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: background-color .18s ease;
    /* Yükseklik hizası: bkz. dosya sonundaki "dolgu yüksekliği" notu.
       Şeffaf kenarlık + padding-box, dolguyu sayfa numaralarının beyaz
       alanıyla aynı yüksekliğe indirir; dış kutu değişmez. */
    border: 1px solid transparent;
    background: var(--vurgu);
    background-clip: padding-box;
}
.sayfalama .sayfalama-tumu:hover {
    background: var(--vurgu-koyu); background-clip: padding-box; color: #fff;
}

/* Arama/filtre düğmesi de turuncu — araç çubuğundaki tek eylem o.
   Seçici bilerek dar: yalnızca araç çubuğu formundaki gönder düğmesi.
   Tablo satırlarındaki "Düzenle/Şifre" gibi ikincil .btn-gri düğmeler
   ve formlardaki "Vazgeç" bağlantıları gri kalır.

   DOLGU YÜKSEKLİĞİ (düğme neden 1px şeffaf kenarlık taşıyor):
   Girdi kutuları ile düğmenin DIŞ kutusu zaten eşit (ikisi de 38px).
   Ama girdinin 1px kenarlığı (#e3e8ee) sayfa zeminiyle (#f5f7fa) neredeyse
   aynı renk olduğundan göz onu kutunun parçası saymıyor: girdi 36px'lik
   beyaz dolgu olarak okunuyor. Düğmenin doygun turuncusu ise 38px'in
   tamamını kaplıyor → düğme 2px daha yüksek görünüyordu.
   Çözüm: düğmeye de 1px ŞEFFAF kenarlık + background-clip:padding-box.
   Turuncu dolgu 36px'e iner (girdinin beyazıyla birebir), dış kutu 38px
   kalır — yani hiçbir yerleşim/hizalama değeri değişmez. */
.arac-cubugu form button[type=submit] {
    border: 1px solid transparent;
    background: var(--vurgu);
    background-clip: padding-box;
}
.arac-cubugu form button[type=submit]:hover {
    background: var(--vurgu-koyu);
    background-clip: padding-box;
}

/* ==========================================================================
   MARKA RENKLERİ — turuncunun tasarımda ikinci renk olarak kullanımı
   Logo3.psd'den örneklendi: teal #008080 (AG) + turuncu #f78a44 (Academy).
   Teal ana eylem/gezinme rengi, turuncu vurgu ve ayraç rengi olarak çalışır.
   ========================================================================== */

/* --- Logo --- */
.panel-brand { display: flex; align-items: center; gap: 12px; }
.panel-brand img { display: block; height: 30px; width: auto; }
.panel-brand span {
    font-weight: 300; opacity: .9; font-size: 15px;
    padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35);
}
.giris-kutu .logo img { display: block; margin: 0 auto 8px; height: 46px; width: auto; }

/* --- Başlıklarda turuncu ayraç --- */
h1.sayfa-baslik {
    position: relative; padding-left: 14px;
}
h1.sayfa-baslik::before {
    content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
    width: 4px; border-radius: 3px; background: var(--vurgu);
}
.bolum-baslik {
    position: relative; padding-left: 12px;
}
.bolum-baslik::before {
    content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 3px; border-radius: 3px; background: var(--vurgu);
}

/* --- İstatistik kartlarında turuncu üst şerit --- */
.istatistik { position: relative; overflow: hidden; }
.istatistik::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--marka) 0%, var(--vurgu) 100%);
}

/* --- İçerik kartında hover'da turuncu alt şerit --- */
.icerik-kart { position: relative; }
.icerik-kart::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--vurgu); transform: scaleX(0); transform-origin: left;
    transition: transform .22s ease;
}
.icerik-kart:hover::after { transform: scaleX(1); }

/* --- Tablo başlığında ince turuncu çizgi --- */
table.tablo thead th { border-bottom: 2px solid var(--vurgu); }

/* --- Giriş kutusunda üst şerit --- */
.giris-kutu .kart {
    border-top: 3px solid var(--vurgu);
}

/* Kart içi başlık şeridi (admin dashboard tabloları) */
.kart-baslik {
    padding: 16px 20px; border-bottom: 1px solid var(--cizgi);
    font-weight: 600; position: relative;
}
.kart-baslik::before {
    content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--vurgu);
}

/* ==========================================================================
   YAN MENÜ — YALNIZCA ADMIN PANELİ
   --------------------------------------------------------------------------
   Bu dosya admin ve akademi tarafından ORTAK kullanılır. Buradaki sınıflar
   (.yan-menu, .mobil-bar, .panel-govde, .yan-ortu) yalnızca admin
   layout'unda geçer; akademi yatay .panel-nav yapısını korur. Aşağıdaki
   hiçbir kural mevcut .panel-topbar / .panel-nav kurallarını değiştirmez.

   Davranış: masaüstünde menü sabit ve her zaman açık; <=900px'te ekran
   dışına kayar, mobil şeritteki düğmeyle açılır (body.yan-acik).
   ========================================================================== */

:root { --yan-genislik: 240px; }

/* ---------- Yan menü gövdesi ---------- */
.yan-menu {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--yan-genislik);
    display: flex; flex-direction: column;
    background: var(--marka); color: #fff;
    padding: 22px 0 16px;
    overflow-y: auto;
    z-index: 60;
}

.yan-menu .yan-marka {
    display: block; padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    margin-bottom: 14px;
}
/* AG Healthcare logosu tek renk (teal) ve saydam zeminli. Teal menüde
   görünmezdi; brightness(0)+invert(1) opak pikselleri beyaza çevirir,
   alfa kanalı korunur. Böylece ayrı bir "beyaz logo" dosyası üretmeye
   gerek kalmıyor — tek kaynak dosya, iki zeminde de doğru görünüm. */
.yan-menu .yan-marka img {
    display: block; width: 168px; height: auto;
    filter: brightness(0) invert(1);
}

/* ---------- Bağlantılar ---------- */
.yan-baglantilar { display: flex; flex-direction: column; }
.yan-baglantilar a {
    /* İkon + metin yan yana; gap ikisinin arasını açar */
    display: flex; align-items: center; gap: 11px;
    padding: 11px 20px;
    color: rgba(255, 255, 255, .82);
    text-decoration: none; font-size: 15px;
    /* Aktif göstergesi sol kenarda; boşluğu şimdiden ayır ki aktif olunca
       yazı yana kaymasın. */
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease;
}
.yan-baglantilar a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
/* İkon boyutu metinle orantılı; flex-shrink:0 uzun etiketlerde ikonun
   ezilmesini engeller. Renk currentColor olduğu için hover/aktif
   durumunda yazıyla birlikte değişir. */
.yan-ikon { width: 18px; height: 18px; flex-shrink: 0; }
.yan-baglantilar a.aktif {
    background: var(--marka-koyu); color: #fff; font-weight: 500;
    border-left-color: var(--vurgu);   /* marka turuncusu = aktif vurgusu */
}

/* ---------- Alt bölüm (kullanıcı + çıkış) ---------- */
.yan-alt {
    margin-top: auto;                  /* menünün en altına yaslar */
    padding: 16px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 14px;
}
.yan-kullanici { display: block; opacity: .85; margin-bottom: 6px; }
.yan-alt form { margin: 0; }

/* ---------- İçerik alanı ---------- */
/* Sol boşluk KARDEŞ seçiciyle veriliyor: giriş sayfasında yan menü
   basılmadığı için kural eşleşmez ve içerik tam genişlikte kalır. */
.yan-menu ~ .panel-govde { margin-left: var(--yan-genislik); }

/* ---------- Mobil şerit ve örtü (masaüstünde gizli) ---------- */
.mobil-bar { display: none; }
.yan-ortu { display: none; }

/* ==========================================================================
   <=900px: menü ekran dışına, mobil şerit devreye
   ========================================================================== */
@media (max-width: 900px) {
    .mobil-bar {
        display: flex; align-items: center; gap: 14px;
        height: 56px; padding: 0 16px;
        background: var(--marka); color: #fff;
        position: sticky; top: 0; z-index: 50;
    }
    .mobil-bar .panel-brand img {
        display: block; width: 140px; height: auto;
        filter: brightness(0) invert(1);   /* teal zemin — bkz. .yan-marka img */
    }

    /* Hamburger: üç çizgi. Dokunma hedefi 44x44 (WCAG önerisi). */
    .menu-dugme {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; margin-left: -10px;
        padding: 0 10px; background: none; border: 0; cursor: pointer;
    }
    .menu-dugme span {
        display: block; height: 2px; border-radius: 2px; background: #fff;
    }

    .yan-menu {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, .3);
    }
    body.yan-acik .yan-menu { transform: translateX(0); }

    /* Menü ekran dışındayken içerik tam genişlik kullanır */
    .yan-menu ~ .panel-govde { margin-left: 0; }

    .yan-ortu {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45); z-index: 55;
    }
    /* [hidden] varsayılanını display:block eziyordu — geri al */
    .yan-ortu[hidden] { display: none; }
}

/* Hareket azaltma tercihi: kayma animasyonunu kapat */
@media (prefers-reduced-motion: reduce) {
    .yan-menu { transition: none; }
}

/* ==========================================================================
   GÖRSEL BÜYÜTME (klinik görüntüler ekranı)
   --------------------------------------------------------------------------
   Listede küçük resme tıklayınca tam boyutlu hâli panel içinde açılır.
   Yeni sekme yerine örtü kullanılıyor: 200+ görselin kalitesi gözden
   geçirilirken her tıklamada sekme açılması kullanışsız olurdu.
   Harici lightbox kütüphanesi YOK — panelin "bağımlılık ekleme" ilkesi.
   ========================================================================== */

/* Tıklanabilir küçük resim: imleç ve hafif geri bildirim */
.buyut { display: block; cursor: zoom-in; position: relative; }
.buyut:hover .onizleme { outline: 2px solid var(--marka); outline-offset: 1px; }

.buyutec {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, .85);
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}
.buyutec[hidden] { display: none; }   /* [hidden] varsayılanını display:flex eziyordu */

.buyutec img, .buyutec video {
    max-width: 100%; max-height: 100%;
    object-fit: contain;               /* gerçek en-boy oranı korunsun */
    border-radius: 4px;
    background: #000;
}
/* Video kontrollerine tıklarken örtü kapanmasın */
.buyutec video { cursor: default; }

.buyutec-baslik {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 14px 20px;
    color: #fff; font-size: 14px;
    background: linear-gradient(rgba(0, 0, 0, .55), transparent);
    pointer-events: none;
}
.buyutec-kapat {
    position: absolute; top: 10px; right: 16px;
    background: none; border: 0; color: #fff;
    font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 10px;
}

/* Düzenleme formundaki büyük önizleme: kaliteyi burada da görebilmek için */
.onizleme-buyuk {
    display: block; max-width: 100%; width: 420px; height: auto;
    border-radius: 6px; border: 1px solid var(--cizgi); background: #f0f3f7;
    cursor: zoom-in;
}

/* Üye düzenleme → Hesap İşlemleri (2026-08-25).
   Şifre üretme ve aktif/pasif alma listeden buraya taşındı. Her satır
   "açıklama solda, düğme sağda" düzeninde; dar ekranda alt alta geçer. */
.hesap-islem {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; padding: 16px 0; border-top: 1px solid var(--cizgi);
}
.hesap-islem:first-of-type { border-top: 0; padding-top: 4px; }
.hesap-islem form { margin: 0; flex-shrink: 0; }
.hesap-islem-metin { min-width: 0; }
.hesap-islem-metin p {
    margin: 6px 0 0; font-size: 13px; color: var(--soluk); line-height: 1.5; max-width: 60ch;
}
@media (max-width: 700px) {
    .hesap-islem { flex-direction: column; align-items: stretch; gap: 10px; }
    .hesap-islem form .btn { width: 100%; }
}