/* =========================================================
   b2bNet — yorumlar.css
   Kullanici yorumlari duvari ve tek yorum sayfasi.
   main.css'ten SONRA yuklenir.

   Yaklasim: veride firma logosu ya da fotograf YOK; sadece
   kisa alinti ve "Isim, Firma" var. O yuzden sayfayi tasiyan
   sey tipografi: alintilar farkli uzunlukta oldugu icin
   kartlar sutun akisina birakiliyor (CSS columns), boylece
   esit yukseklige zorlanip altlarinda bosluk kalmiyor.
   ========================================================= */

.b2b-yorum{
  /* Ust alan durgunken 140px, kayinca 84px. */
  --b2b-yrm-ust:84px;

  --b2b-yrm-zemin:#F6F9FF;
  --b2b-yrm-cizgi:#E4EBF7;
  --b2b-yrm-solgun:#8296B5;

  background:var(--b2b-yrm-zemin);
}
@media (max-width:767px){ .b2b-yorum{ --b2b-yrm-ust:104px; } }

.b2b-yorum-ic{
  max-width:1160px; margin-inline:auto;
  padding-inline:20px;
  padding-top:calc(var(--b2b-yrm-ust) + 52px);
  padding-bottom:90px;
}
@media (min-width:768px){
  .b2b-yorum-ic{
    padding-top:calc(var(--b2b-yrm-ust) + 76px);
    padding-bottom:120px;
  }
}


/* ---------------------------------------------------------
   1. TEPE
   Soru buyuk, cevap duvari onun altinda. Sayfanin sorusu
   ekranda kalsin diye baslik genis degil, dar tutuluyor.
   --------------------------------------------------------- */
.b2b-yorum-tepe{ max-width:720px; }

.b2b-yrm-ustluk{
  display:block;
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--b2b-mavi-600);
}
.b2b-yorum-baslik{
  margin:16px 0 0;
  font-size:clamp(2rem,4.4vw,2.9rem);
  font-weight:700; line-height:1.12; letter-spacing:-.035em;
  color:var(--b2b-lacivert);
}
.b2b-yorum-aciklama{
  max-width:56ch; margin:18px 0 0;
  font-size:clamp(1rem,1.4vw,1.1rem);
  line-height:1.65; color:var(--b2b-gri);
}
.b2b-yorum-sayac{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:22px;
  font-size:13px; color:var(--b2b-yrm-solgun);
}
.b2b-yorum-sayac b{ color:var(--b2b-lacivert); font-weight:700; }


/* ---------------------------------------------------------
   2. DUVAR
   Sutun akisi: kart yuksekligi icerigine gore, aralarinda
   bosluk kalmaz. Kart sutunda bolunmesin diye break-inside.
   --------------------------------------------------------- */
.b2b-yorum-duvar{
  margin:44px 0 0;
  columns:1; column-gap:20px;
}
@media (min-width:700px){ .b2b-yorum-duvar{ columns:2; margin-top:56px; } }
@media (min-width:1040px){ .b2b-yorum-duvar{ columns:3; } }

.b2b-yorum-kart{
  position:relative;
  display:block;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 20px;
  padding:26px 24px 22px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--b2b-yrm-cizgi);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.b2b-yorum-kart:hover{
  border-color:var(--b2b-mavi-200);
  box-shadow:0 26px 50px -40px rgba(11,38,102,.55);
  transform:translateY(-2px);
}

/* arka plandaki solgun tirnak — sus degil, kartin ne oldugunu
   bir bakista soyluyor */
.b2b-yorum-kart::before{
  content:'”';
  position:absolute; top:2px; right:18px;
  font-size:76px; line-height:1;
  color:#EDF3FF;
  pointer-events:none;
}

.b2b-yorum-metin{
  position:relative;
  margin:0;
  font-size:16.5px; line-height:1.65;
  letter-spacing:-.012em; color:var(--b2b-lacivert);
}

.b2b-yorum-kunye{
  display:grid; grid-template-columns:38px minmax(0,1fr);
  gap:12px; align-items:center;
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--b2b-yrm-cizgi);
}
.b2b-yorum-bas{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:999px;
  background:#EDF3FF; color:var(--b2b-mavi-700);
  font-size:13px; font-weight:700; letter-spacing:.02em;
}
.b2b-yorum-ad{
  display:block;
  font-size:14.5px; font-weight:700; line-height:1.3;
  color:var(--b2b-lacivert);
}
.b2b-yorum-firma{
  display:block; margin-top:2px;
  font-size:13px; line-height:1.35; color:var(--b2b-yrm-solgun);
}

.b2b-yorum-devam{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px;
  font-size:13px; font-weight:700; color:var(--b2b-mavi-700);
}
.b2b-yorum-devam svg{ width:14px; height:14px; }
.b2b-yorum-kart:hover .b2b-yorum-devam svg{ transform:translateX(3px); }
.b2b-yorum-devam svg{ transition:transform .2s ease; }


/* ---------------------------------------------------------
   3. DIP — KOYU BANT
   Duvar acik zeminde; sayfayi kapatan cagri koyu bir yuzeyde
   dursun ki goz oraya gitsin. Buton renkleri koyu zemine gore:
   --birincil beyaz zeminli, --cam saydam beyaz — ikisi de
   main.css'teki asil hallerinde dogru calisir.
   --------------------------------------------------------- */
.b2b-yorum-dip{
  position:relative; overflow:hidden;
  margin-top:52px; padding:38px 28px 40px;
  border-radius:26px;
  background:linear-gradient(135deg,#12327A 0%,#0B2050 55%,#081739 100%);
  color:#fff;
}
@media (min-width:768px){
  .b2b-yorum-dip{ padding:48px 44px 50px; }
}
/* zeminde cok solgun bir isik lekesi — duz koyu blok gibi
   durmasin, ust menuyle ayni dili konussun */
.b2b-yorum-dip::before{
  content:''; position:absolute; inset:auto auto -60% -10%;
  width:420px; height:420px; border-radius:999px;
  background:radial-gradient(circle,rgba(96,150,255,.28),transparent 68%);
  pointer-events:none;
}
.b2b-yorum-dip > *{ position:relative; }

.b2b-yorum-dip-baslik{
  margin:0;
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  font-weight:700; letter-spacing:-.028em; line-height:1.2;
  color:#fff;
}
.b2b-yorum-dip-yazi{
  max-width:52ch; margin:11px 0 0;
  font-size:15px; line-height:1.65; color:rgba(226,236,255,.82);
}
.b2b-yorum-dip-eylem{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:26px;
}
.b2b-yorum-dip-eylem .b2b-buton--cam{ margin-top:0; }


/* ---------------------------------------------------------
   3b. TAM METIN PENCERESI
   Karta tiklayinca ayri sayfaya gitmek yerine yorum yerinde
   aciliyor. Detay sayfasi duruyor: JS calismazsa baglanti
   normal calisir, arama motoru da oraya gider.
   --------------------------------------------------------- */
.b2b-yorum-tam{ display:none; }

.b2b-pencere{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(8,20,52,.55);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  opacity:0; transition:opacity .22s ease;
}
.b2b-pencere[hidden]{ display:none; }
.b2b-pencere--acik{ opacity:1; }

.b2b-pencere-kutu{
  position:relative;
  width:100%; max-width:660px; max-height:86vh;
  display:flex; flex-direction:column;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 40px 90px -50px rgba(6,20,56,.85);
  transform:translateY(14px) scale(.985);
  transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.b2b-pencere--acik .b2b-pencere-kutu{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .b2b-pencere,
  .b2b-pencere-kutu{ transition:none; }
}

/* kapatma — parmakla da rahat basilsin diye buyuk */
.b2b-pencere-kapat{
  position:absolute; top:14px; right:14px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid rgba(11,38,102,.1);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--b2b-lacivert);
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.b2b-pencere-kapat svg{ width:22px; height:22px; }
.b2b-pencere-kapat:hover{
  background:#fff; border-color:var(--b2b-mavi-200); color:var(--b2b-mavi-700);
}
.b2b-pencere-kapat:active{ transform:scale(.94); }

.b2b-pencere-govde{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:52px 26px 8px;
}
@media (min-width:640px){ .b2b-pencere-govde{ padding:56px 40px 10px; } }

/* saydam beyaz zeminde acik mavi kayboluyordu */
.b2b-pencere-tirnak{
  display:block; margin:0 0 -14px;
  font-size:54px; line-height:1; color:#9FBBE8;
}
.b2b-pencere-metin{
  font-size:16px; line-height:1.75; color:#33456A;
}
.b2b-pencere-metin p,
.b2b-pencere-metin div{ margin:0 0 14px; }
.b2b-pencere-metin p:last-child{ margin-bottom:0; }
.b2b-pencere-metin strong{ color:var(--b2b-lacivert); }
.b2b-pencere-metin img{
  display:block; max-width:100%; height:auto;
  margin:16px 0; border-radius:12px;
}

.b2b-pencere-alt{
  display:grid; grid-template-columns:46px minmax(0,1fr) auto;
  gap:14px; align-items:center;
  padding:18px 26px 22px;
  margin-top:14px;
  border-top:1px solid rgba(11,38,102,.09);
}
@media (min-width:640px){ .b2b-pencere-alt{ padding:18px 40px 24px; } }
.b2b-pencere-bas{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px;
  background:#E7EFFF; color:var(--b2b-mavi-700);
  font-size:15px; font-weight:700;
}
.b2b-pencere-ad{
  display:block;
  font-size:15.5px; font-weight:700; color:var(--b2b-lacivert);
}
.b2b-pencere-firma{
  display:block; margin-top:2px;
  font-size:13.5px; color:var(--b2b-yrm-solgun);
}
.b2b-pencere-baglanti{
  font-size:13px; font-weight:700; color:var(--b2b-mavi-700);
  white-space:nowrap;
}
.b2b-pencere-baglanti:hover{ text-decoration:underline; }
@media (max-width:520px){
  .b2b-pencere-alt{ grid-template-columns:46px minmax(0,1fr); }
  .b2b-pencere-baglanti{ display:none; }
}

/* pencere acikken arkadaki sayfa kaymasin */
body.b2b-kilit{ overflow:hidden; }


/* =========================================================
   4. TEK YORUM SAYFASI
   Tek sutun, okuma genisligi dar. Alinti buyuk puntoyla
   basliyor; kunye altta, imza gibi.
   ========================================================= */
.b2b-ydetay-ic{
  max-width:720px; margin-inline:auto;
  padding-inline:20px;
  padding-top:calc(var(--b2b-yrm-ust) + 44px);
  padding-bottom:90px;
}
@media (min-width:768px){
  .b2b-ydetay-ic{
    padding-top:calc(var(--b2b-yrm-ust) + 68px);
    padding-bottom:120px;
  }
}

.b2b-ydetay-geri{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--b2b-mavi-700);
}
.b2b-ydetay-geri svg{ width:15px; height:15px; }
.b2b-ydetay-geri:hover{ text-decoration:underline; }

.b2b-ydetay-tirnak{
  display:block; margin:26px 0 -18px;
  font-size:64px; line-height:1; color:#D9E5FA;
}

.b2b-ydetay-metin{
  font-size:clamp(1.05rem,1.7vw,1.2rem);
  line-height:1.8; color:#33456A;
}
.b2b-ydetay-metin p{ margin:0 0 18px; }
.b2b-ydetay-metin p:last-child{ margin-bottom:0; }
/* Buyuk punto giris yalnizca kisa ilk paragraflarda (PHP karar
   veriyor); uzun paragrafi buyutmek okumayi zorlastiriyordu. */
.b2b-ydetay-metin--vurgu p:first-child{
  font-size:clamp(1.2rem,2.2vw,1.45rem);
  line-height:1.55; letter-spacing:-.02em;
  font-weight:600; color:var(--b2b-lacivert);
}
.b2b-ydetay-metin div{ margin:0 0 12px; }
.b2b-ydetay-metin strong{ color:var(--b2b-lacivert); }
.b2b-ydetay-metin img{
  display:block; max-width:100%; height:auto;
  margin:22px 0; border-radius:14px; border:1px solid var(--b2b-yrm-cizgi);
}

.b2b-ydetay-kunye{
  display:grid; grid-template-columns:52px minmax(0,1fr);
  gap:16px; align-items:center;
  margin-top:34px; padding-top:24px;
  border-top:1px solid var(--b2b-yrm-cizgi);
}
.b2b-ydetay-bas{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:999px;
  background:#EDF3FF; color:var(--b2b-mavi-700);
  font-size:17px; font-weight:700;
}
.b2b-ydetay-ad{
  display:block;
  font-size:16.5px; font-weight:700; letter-spacing:-.016em;
  color:var(--b2b-lacivert);
}
.b2b-ydetay-firma{
  display:block; margin-top:3px;
  font-size:14px; color:var(--b2b-yrm-solgun);
}

/* onceki / sonraki */
.b2b-ydetay-gez{
  display:grid; gap:10px;
  margin-top:34px;
}
@media (min-width:640px){
  .b2b-ydetay-gez{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
.b2b-ydetay-gez-bag{
  display:block; padding:15px 17px;
  border:1px solid var(--b2b-yrm-cizgi); border-radius:15px;
  background:#fff;
  transition:border-color .2s ease;
}
.b2b-ydetay-gez-bag:hover{ border-color:var(--b2b-mavi-200); }
.b2b-ydetay-gez-etiket{
  display:block; margin-bottom:4px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--b2b-yrm-solgun);
}
.b2b-ydetay-gez-ad{
  display:block;
  font-size:14.5px; font-weight:600; line-height:1.4; color:var(--b2b-lacivert);
}
.b2b-ydetay-gez--sonraki{ text-align:right; }