/* ==================================================================
   yorumlar.css — YORUMLAR SAYFASI (.yr-*)                  2026-09-08
   ==================================================================
   Sayfa  : views/yeni/yorumlar.php  (/sikayet-yorum-ogrenci-gorusleri)
   Yükleme: ortak.css + kurs.css + vitrin.css + BU DOSYA (+ tw.css)
   Plan   : memory-bank/yorumlar-sayfasi-analiz-ve-plan.md

   BURADA OLMAYANLAR (yüklü dosyalardan geliyor, YENİDEN YAZILMADI):
     .vit-hero .vit-h1 .vit-yol .vit-kicker .vit-hero-cta .vit-liste
     .vit-bul .vit-ara .vit-cipler .vit-cip .vit-bos-sonuc  (vitrin.css)
     .rev zemin/kenar + .rev-kim .rev-foto .rev-oynat .rev-puan
     .rev-tam + .nk-modal-yorum ailesi + .faq .sss-liste     (kurs.css)
     .btn .btn-primary .btn-cam .sec-head .kicker .wrap      (ortak/kurs)

   ⚠️ AYNA: `.yr-izgara .rev` blokları kurs.css'teki `.yrms .rev`
   (şerit) kurallarının ızgara kopyası — oradaki kurallar `.yrms`
   kapsamında olduğundan burada geçmiyor. kurs.css'te şerit kartı
   değişirse BU DOSYA da güncellenmeli (satır ~1298-1474).
   Kart <li> içinde <figure class="rev"> — çıplak `.rev` (kurs.css
   1256, eski .revs ızgarası) zemin/kenar/flex'i zaten veriyor;
   buradaki kurallar üstüne şerit görünümünü giydiriyor.
   ================================================================== */


/* ---- HERO: cevap-önce özet -----------------------------------------
   Koyu lacivert hero zemininde (vit-hero) lede paletiyle aynı ton. */
.yr-cevap{
  margin:14px 0 22px; max-width:62ch;
  font-size:clamp(15.5px,1.5vw,17px); line-height:1.7; color:#C9D8EE;
}
.yr-cevap b{ color:#fff }

/* V3 (patron md.1): mikro satırdaki panel bağlantısı — .vit-hero-mikro
   soluk (#8FA6C6); link altı çizgili + bir ton açık, yoksa görünmez. */
.yr-mikro-link{
  color:#C9D8EE; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  transition:color .16s ease;
}
.yr-mikro-link:hover{ color:#fff }


/* ---- HERO SAĞ PANELİ: öne çıkan yorum + avatar destesi -------------
   (2026-09-09 — "sağ kısım boş kalmış".) Kap vitrin.css'ten
   (.vit-hero-yan çıplak dikey ızgara); kartlar cam — menü/hakkımızda
   yüzey diliyle aynı. Öne çıkan kart <button>: tıklama ızgaradaki ilk
   kartın modalını açıyor. */
.yr-one{
  display:grid; gap:12px; text-align:left;
  padding:16px 16px 15px; margin:0;
  border-radius:16px; cursor:pointer;
  font:inherit; color:#fff;
  background:linear-gradient(158deg, rgb(255 255 255 / .1), rgb(255 255 255 / .04));
  border:1px solid rgb(255 255 255 / .14);
  box-shadow:0 1px 0 rgb(255 255 255 / .07) inset, 0 20px 44px -28px rgb(6 14 30 / .8);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.yr-one:hover{
  border-color:rgb(255 255 255 / .3);
  background:linear-gradient(158deg, rgb(255 255 255 / .14), rgb(255 255 255 / .06));
  transform:translateY(-2px);
}
.yr-one-ust{ display:flex; align-items:center; gap:12px; min-width:0 }
.yr-one-foto,
.yr-one-ava{
  position:relative; flex:none;
  width:56px; height:56px; border-radius:50%;
}
.yr-one-foto img{ width:100%; height:100%; object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 2px rgb(255 255 255 / .25) }
.yr-one .ava{ background:rgb(255 255 255 / .12); color:#fff; font-size:17px }
.yr-one-kim{ display:grid; gap:2px; min-width:0 }
.yr-one-kim b{ font-size:15.5px; font-weight:900; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.yr-one-unvan{ font-size:12.5px; font-weight:700; color:#8FB4EA }
.yr-one .rev-puan{ margin-top:3px }
.yr-one-metin{
  font-size:13.5px; line-height:1.6; color:#C9D8EE;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:3; line-clamp:3;
}
.yr-one-hap{
  justify-self:start;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 13px; border-radius:999px;
  font-size:13px; font-weight:800; color:#fff;
  background:rgb(255 255 255 / .12);
  border:1px solid rgb(255 255 255 / .24);
  transition:background .18s ease, border-color .18s ease;
}
.yr-one-hap svg{ width:14px; height:14px; flex:none }
.yr-one:hover .yr-one-hap{ background:rgb(255 255 255 / .2); border-color:rgb(255 255 255 / .42) }

/* Avatar destesi — üst üste binen yuvarlak fotolar + tek satır metin. */
.yr-deste{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:11px 14px; border-radius:14px;
  background:rgb(255 255 255 / .05);
  border:1px solid rgb(255 255 255 / .1);
  transition:border-color .18s ease, background .18s ease;
}
.yr-deste:hover{ background:rgb(255 255 255 / .09); border-color:rgb(255 255 255 / .22) }
.yr-deste-fotolar{ display:flex; flex:none }
.yr-deste-fotolar img{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid #1B3157; background:#233D66;
}
.yr-deste-fotolar img + img{ margin-left:-10px }
.yr-deste-metin{ font-size:12.5px; line-height:1.45; color:#9DB3D0; min-width:0 }
.yr-deste-metin b{ color:#fff; font-weight:800 }


/* ---- SÜZGEÇ ---------------------------------------------------------
   Kutu vitrin.css'ten; yalnız ızgarayla arası açılıyor. */
.yr-liste .vit-bul{ margin-bottom:clamp(20px,3vw,30px) }
.yr-liste .vit-bos-sonuc{ margin-bottom:clamp(20px,3vw,30px) }

/* V3 (patron md.3): çip adet rozeti — "her alanda onlarca gerçek
   başarı hikayesi" algısı tek bakışta. Sayı view'da canlı basılıyor. */
.vit-cip-adet{
  margin-left:2px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:800; line-height:1.4;
  background:var(--tint); color:var(--brand-d);
}
.vit-cip.secili .vit-cip-adet{ background:rgb(255 255 255 / .16); color:#fff }


/* ---- IZGARA ---------------------------------------------------------
   Şerit DEĞİL: arşiv sayfası, tamamı ekranda. Kırılımlar eski .revs
   ızgarasıyla aynı (700/1040) — kart eni şerittekine yakın kalıyor. */
.yr-izgara{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media (min-width:700px){  .yr-izgara{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .yr-izgara{ grid-template-columns:repeat(3,1fr) } }
.yr-kart{ min-width:0 }
/* Süzgeç JS'i <li>'yi gizliyor; list-item [hidden]'ı doğal tanır ama
   kural yine de açık — başka bir katman display verirse tuzak olmasın. */
.yr-kart[hidden]{ display:none }


/* ---- KART: şerit görünümünün ızgara kopyası (AYNA — bkz. başlık) ---- */
.yr-izgara .rev{
  /* margin:0 ŞART: <figure> varsayılanı margin:1em 40px. */
  margin:0; height:100%;
  position:relative; overflow:hidden;
  padding:26px 24px 22px; gap:16px;
  border-radius:var(--r-x); box-shadow:var(--sh-1);
  transition:box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}
/* Büyük tırnak süsü. */
.yr-izgara .rev::before{
  content:"\201C"; position:absolute; right:16px; top:-6px;
  font-size:88px; line-height:1; font-weight:900;
  color:rgb(47 107 208 / .09); pointer-events:none;
}
@media (hover:hover){
  .yr-izgara .rev.tiklanir:hover{
    box-shadow:var(--sh-2); border-color:rgb(47 107 208 / .3);
    transform:translateY(-3px);
  }
}
.yr-izgara .rev.tiklanir:focus-within{
  border-color:var(--brand); box-shadow:0 0 0 3px rgb(47 107 208 / .18);
}

/* Video kartı: lacivert (şeritteki gerekçe aynen — kırmızı birincil
   eyleme ayrılı, lacivert açık ızgarada yeterince sıyrılıyor). */
.yr-izgara .rev.videolu{
  background:linear-gradient(158deg,var(--navy-t),var(--navy-d));
  border-color:rgb(255 255 255 / .14);
  box-shadow:0 2px 4px rgb(23 43 76 / .06), 0 20px 44px -24px rgb(16 31 57 / .55);
  color:#fff;
}
.yr-izgara .rev.videolu::before{ color:rgb(255 255 255 / .11) }
.yr-izgara .rev.videolu blockquote{ color:#C9D8EE }
.yr-izgara .rev.videolu cite{ color:#fff }
.yr-izgara .rev.videolu .who{ color:#8FB4EA }
.yr-izgara .rev.videolu .ava{ background:rgb(255 255 255 / .12); color:#fff }
.yr-izgara .rev.videolu .rev-foto{
  background:rgb(255 255 255 / .1);
  box-shadow:0 0 0 2px rgb(255 255 255 / .22), 0 10px 22px -12px rgb(0 0 0 / .6);
}
@media (hover:hover){
  .yr-izgara .rev.videolu.tiklanir:hover{
    border-color:rgb(255 255 255 / .32);
    box-shadow:0 2px 4px rgb(23 43 76 / .06), 0 26px 52px -24px rgb(16 31 57 / .68);
  }
}
.yr-izgara .rev.videolu.tiklanir:focus-within{
  border-color:#8FB4EA; box-shadow:0 0 0 3px rgb(143 180 234 / .3);
}

/* Avatar 56px — çıplak `.rev .ava` (kurs.css 1260, eski ızgara) 38px'e
   düşürüyor, şeritteki boyuta çekiliyor. */
.yr-izgara .rev .ava{
  position:relative;
  width:56px; height:56px; border-radius:50%; flex:none;
  font-size:17px; letter-spacing:.01em;
}

/* Alıntı + kırpma — kırpma YALNIZ html.js-rev altında (JS yoksa metin
   tam, çip zaten hidden; DOM'da olup ekranda olmayan metin oluşmuyor). */
.yr-izgara .rev blockquote{ margin:0; font-size:15.5px; line-height:1.72; color:var(--ink-2) }
html.js-rev .yr-izgara .rev blockquote{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:4; line-clamp:4;
}

.yr-izgara .rev.tiklanir:hover .rev-tam{ color:var(--brand) }
/* Video kartında çip hap biçiminde. */
.yr-izgara .rev.videolu .rev-tam{
  padding:9px 15px 9px 13px; border-radius:999px; color:#fff;
  background:rgb(255 255 255 / .12);
  border:1px solid rgb(255 255 255 / .24);
  transition:background .18s ease, border-color .18s ease;
}
.yr-izgara .rev.videolu.tiklanir:hover .rev-tam{
  background:rgb(255 255 255 / .2); border-color:rgb(255 255 255 / .42); color:#fff;
}

@media (prefers-reduced-motion:reduce){
  .yr-izgara .rev{ transition:none }
  .yr-izgara .rev.tiklanir:hover{ transform:none }
}


/* ---- KART ALTI: kategori rozeti + TARİH -----------------------------
   figcaption çıplak `.rev figcaption`dan (kurs.css 1259) flex +
   üst çizgi alıyor; margin-top:auto ORADAN GELİYOR ama .rev-tam'da da
   auto var — boşluk ikiye bölünmesin diye burada sıfırlanıyor (dibe
   iten .rev-tam kalıyor, figcaption onun hemen altında). */
.yr-izgara .rev .yr-kart-alt{
  margin-top:0; padding-top:12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.yr-kat-cip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.02em;
  background:var(--tint); color:var(--brand-d); white-space:nowrap;
}
.yr-tarih{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink-3) }
.yr-izgara .rev.videolu .yr-kart-alt{ border-top-color:rgb(255 255 255 / .14) }
.yr-izgara .rev.videolu .yr-kat-cip{ background:rgb(255 255 255 / .12); color:#BCD3F2 }
.yr-izgara .rev.videolu .yr-tarih{ color:#8FB4EA }


/* ---- MID-ROLL DÖNÜŞÜM ŞERİDİ (V3, patron md.2) ----------------------
   6. karttan sonra ızgarada TAM GENİŞLİK tek şerit — şikayet panosuyla
   aynı lacivert yüzey dili (yeni renk uydurulmadı); buton kırmızı
   birincil: bu sitede kırmızı = dönüşüm rengi (ortak.css notu).
   Süzgeç aktifken JS `hidden` basıyor. */
.yr-orta{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px clamp(24px,4vw,48px);
  padding:clamp(24px,4vw,36px) clamp(24px,4.5vw,44px);
  border-radius:var(--r-x);
  background:linear-gradient(158deg,var(--navy-t),var(--navy-d));
  border:1px solid rgb(255 255 255 / .12);
  box-shadow:0 2px 4px rgb(23 43 76 / .06), 0 24px 52px -26px rgb(16 31 57 / .6);
  color:#fff;
}
.yr-orta[hidden]{ display:none }
.yr-orta-metin{ flex:1 1 420px; min-width:0; max-width:70ch }
.yr-orta .kicker{ color:#8FB4EA; margin-bottom:8px }
.yr-orta h3{
  margin:0 0 10px;
  font-size:clamp(20px,2.4vw,26px); line-height:1.24; letter-spacing:-.02em;
}
.yr-orta p{ margin:0; font-size:clamp(14.5px,1.4vw,16px); line-height:1.68; color:#C9D8EE }
.yr-orta .btn{ flex:none }


/* ---- ŞİKAYET / ÖNERİ KUTUSU -----------------------------------------
   "nettekurs şikayet" sorgusunun görünür yüzeyi — sayfanın geri
   kalanından ayrışan lacivert pano; butonlar koyu zemin takımı
   (btn-primary + btn-cam). #sikayet çıpası menü altına saplanmasın. */
.yr-sikayet-bolum{ padding-block:0 clamp(28px,4vw,56px); scroll-margin-top:90px }
.yr-sikayet{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px clamp(24px,4vw,48px);
  padding:clamp(26px,4.5vw,46px);
  border-radius:var(--r-x);
  background:linear-gradient(158deg,var(--navy-t),var(--navy-d));
  border:1px solid rgb(255 255 255 / .12);
  box-shadow:0 2px 4px rgb(23 43 76 / .06), 0 24px 52px -26px rgb(16 31 57 / .6);
  color:#fff;
}
.yr-sikayet-metin{ flex:1 1 420px; min-width:0; max-width:66ch }
.yr-sikayet-metin .kicker{ color:#8FB4EA }
.yr-sikayet-metin h2{
  margin:10px 0 12px;
  font-size:clamp(22px,2.8vw,30px); line-height:1.22; letter-spacing:-.02em;
}
.yr-sikayet-metin p{ margin:0; font-size:clamp(15px,1.5vw,16.5px); line-height:1.7; color:#C9D8EE }
/* V3 (patron md.4): kap artık dikey — düğme satırı + çalışma saati notu.
   ESKİSİ: .yr-sikayet-cta{ display:flex; flex-wrap:wrap; gap:12px } */
.yr-sikayet-cta{ display:grid; gap:12px; justify-items:start }
.yr-sikayet-dugmeler{ display:flex; flex-wrap:wrap; gap:12px }
.yr-sikayet-not{ margin:0; font-size:12.5px; line-height:1.55; color:#9DB3D0; max-width:44ch }

/* WhatsApp birincil düğme — tanınırlık yeşili (marka rengi #25D366'nın
   koyu panoda kontrast tutan tonu); btn-primary'nin kırmızı gölgesi
   yeşile çevrildi. İkon .btn'in kendi gap'ine oturuyor. */
.yr-btn-wa{
  background:#1DAA53;
  box-shadow:0 1px 2px rgb(9 84 40 / .3), 0 8px 20px -10px rgb(29 170 83 / .6);
}
.yr-btn-wa:hover{
  background:#22BF5E;
  box-shadow:0 2px 4px rgb(9 84 40 / .26), 0 14px 28px -12px rgb(29 170 83 / .65);
}
.yr-btn-wa .icon{ width:19px; height:19px; flex:none }


/* ---- SSS ------------------------------------------------------------ */
.yr-sss{ padding-block:0 clamp(38px,5vw,72px); scroll-margin-top:90px }