/* ============================================================
   KATALOG PRO — "Clara" katmanı (taslak 2, 20.09.2026)
   kp.css'in ÜSTÜNE yüklenir; mevcut sınıflar silinmez.

   Clara'nın KODUNDAN ölçülen şeyler (ajan raporu):
     · Zemin: 13 radial-gradient "blob" (sabit) + SVG noise .025
     · Başlıklar: overflow:hidden sarmalayıcıda translateY(100%) → 0,
       0.8s ease-out / opacity 0.6s; IO threshold .5, rootMargin -50px
     · Telefon/kutu: translateY(60px) → 0, 0.8s cubic-bezier(.16,1,.3,1)
     · Kart yığını: translateY(200px) scale(.3) → 0, 0.8s
       cubic-bezier(.34,1.56,.64,1) (zıplama), JS 150ms + CSS 100ms kademe
     · Üç sütunlu dikey akan karusel: 30 / 25 / 35 px/sn, orta ters yön,
       kenarlarda mask; hover'da ölçek 1.06 + komşuları itme
     · Yorum duvarı: iki sıra, rAF ile 0.5px/kare
     · Üst çubuk: fixed top:20px, radius 60px, cam; aşağı kaydırınca
       "liquid glass" (daha saydam + saturate), yukarı kaydırınca geri
     · Sayfa: yüklenince .container 0.3s solma
   Renk dili: mor/pembe yerine MAVİ ailesi (#2153E0 tek vurgu).
   ============================================================ */

:root{
  --e-yumusak:cubic-bezier(.16,1,.3,1);
  --e-hizli:cubic-bezier(.32,.72,0,1);
  --e-standart:cubic-bezier(.4,0,.2,1);
  --e-zipla:cubic-bezier(.34,1.56,.64,1);
  --cam:rgba(255,255,255,.90);
  --cam-kenar:rgba(255,255,255,.7);
  --golge-cam:0 8px 30px rgba(20,24,33,.12);
  --golge-cam-hover:0 12px 40px rgba(20,24,33,.15);
  --gradyan-ana:linear-gradient(135deg,#2153E0 0%,#5B8CFF 100%);
  --gradyan-yazi:linear-gradient(135deg,#1A45BE 0%,#2153E0 35%,#3D8BFF 70%,#38BDF8 100%);
  --zemin-taban:#F7F9FD;
  --blob-cyan:hsla(199,85%,66%,.55);
  --blob-cyan-soft:hsla(199,80%,74%,.35);
  --blob-mavi:hsla(224,92%,68%,.42);
  --blob-mavi-soft:hsla(224,85%,78%,.3);
  --blob-lavanta:hsla(250,85%,85%,.45);
  --blob-lavanta-soft:hsla(255,70%,88%,.28);
  --blob-nane:hsla(170,50%,76%,.35);
  --blob-gok:hsla(210,95%,80%,.3);
  --noise-op:.025;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* 21.09: koyu tema PC'de gozu aliyordu. Zemin acildi, lekeler
       kisildi, golge hafifledi. Okunaklilik ~11:1 ile korunuyor. */
    --cam:rgba(28,34,44,.88);--cam-kenar:rgba(255,255,255,.07);
    --golge-cam:0 8px 24px rgba(0,0,0,.28);--golge-cam-hover:0 12px 32px rgba(0,0,0,.38);
    --zemin-taban:#151A22;
    --blob-cyan:hsla(199,70%,50%,.13);--blob-cyan-soft:hsla(199,65%,55%,.07);
    --blob-mavi:hsla(224,75%,60%,.15);--blob-mavi-soft:hsla(224,70%,60%,.07);
    --blob-lavanta:hsla(250,55%,65%,.11);--blob-lavanta-soft:hsla(255,50%,65%,.06);
    --blob-nane:hsla(170,40%,50%,.07);--blob-gok:hsla(210,75%,60%,.07);
    --noise-op:.035;
  }
}
:root[data-theme="dark"]{
  /* 21.09: koyu tema PC'de gozu aliyordu. Zemin acildi, lekeler
     kisildi, golge hafifledi. Okunaklilik ~11:1 ile korunuyor. */
  --cam:rgba(28,34,44,.88);--cam-kenar:rgba(255,255,255,.07);
  --golge-cam:0 8px 24px rgba(0,0,0,.28);--golge-cam-hover:0 12px 32px rgba(0,0,0,.38);
  --zemin-taban:#151A22;
  --blob-cyan:hsla(199,70%,50%,.13);--blob-cyan-soft:hsla(199,65%,55%,.07);
  --blob-mavi:hsla(224,75%,60%,.15);--blob-mavi-soft:hsla(224,70%,60%,.07);
  --blob-lavanta:hsla(250,55%,65%,.11);--blob-lavanta-soft:hsla(255,50%,65%,.06);
  --blob-nane:hsla(170,40%,50%,.07);--blob-gok:hsla(210,75%,60%,.07);
  --noise-op:.035;
}

/* ---------- ZEMİN — Clara premium_gradient.css birebir yerleşim, mavi ailesi ---------- */
body.clara{
  background-color:var(--zemin-taban);
  background-image:
    radial-gradient(ellipse 70% 20% at -5% 2%,  var(--blob-cyan) 0%, var(--blob-cyan-soft) 30%, transparent 65%),
    radial-gradient(ellipse 55% 12% at 85% 5%,  var(--blob-nane) 0%, transparent 60%),
    radial-gradient(ellipse 50% 18% at 75% 12%, var(--blob-mavi) 0%, var(--blob-mavi-soft) 35%, transparent 70%),
    radial-gradient(ellipse 45% 15% at 5% 30%,  var(--blob-cyan-soft) 0%, transparent 70%),
    radial-gradient(ellipse 50% 16% at 88% 35%, var(--blob-lavanta) 0%, var(--blob-lavanta-soft) 40%, transparent 75%),
    radial-gradient(ellipse 40% 12% at 25% 42%, var(--blob-mavi-soft) 0%, transparent 65%),
    radial-gradient(ellipse 48% 14% at 10% 55%, var(--blob-nane) 0%, transparent 60%),
    radial-gradient(ellipse 45% 13% at 92% 58%, var(--blob-gok) 0%, transparent 65%),
    radial-gradient(ellipse 55% 15% at 50% 65%, var(--blob-cyan-soft) 0%, transparent 70%),
    radial-gradient(ellipse 55% 16% at 15% 75%, var(--blob-lavanta) 0%, var(--blob-lavanta-soft) 40%, transparent 75%),
    radial-gradient(ellipse 50% 18% at 80% 78%, var(--blob-mavi) 0%, var(--blob-mavi-soft) 35%, transparent 70%),
    radial-gradient(ellipse 50% 14% at 90% 92%, var(--blob-gok) 0%, transparent 65%),
    radial-gradient(ellipse 60% 18% at 8% 95%,  var(--blob-cyan-soft) 0%, transparent 70%);
  background-repeat:no-repeat;background-attachment:scroll;background-size:100% 100%;
  -webkit-font-smoothing:antialiased;
}
body.clara::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--noise-op);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px 256px;
}
body.clara>*{position:relative;z-index:1}
@media (max-width:768px){body.clara{background-size:180vw 100%;background-position:center top}body.clara::before{opacity:.03}}
.bant-2{background:transparent}
/* Clara: sayfa yüklenince .container 0.3s solma.
   05.10.2026 (SEO hafta 1): <main> artık SOLMUYOR. JavaScript `hazir` diyene
   kadar ilk ekranın tamamı görünmez kalıyordu; telefonda Lighthouse "en büyük
   içerik" 8,9 sn ölçtü. Altlık ve güven bandı ekranın altında, solmaları kalıyor. */
body.clara .guven-bant,body.clara footer{opacity:0;transition:opacity .3s ease}
body.clara.hazir .guven-bant,body.clara.hazir footer{opacity:1}
html:not(.gorun-destek) body.clara .guven-bant,html:not(.gorun-destek) body.clara footer{opacity:1}

/* ---------- CAM KART ---------- */
.cam,.kart.cam,.plan.cam,.galeri.cam figure,.yorum-kart,.canli-kart,.ozellik-metin,.tablo-kutu.cam{
  background:var(--cam);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--cam-kenar);box-shadow:var(--golge-cam)}
.kart.cam,.plan.cam{border-radius:16px;transition:transform .3s ease,box-shadow .3s ease}
.kart.cam:hover,.plan.cam:hover{transform:translateY(-4px);box-shadow:var(--golge-cam-hover)}
.dugme.ana{background:var(--gradyan-ana);border-color:transparent;transition:all .3s var(--e-standart);box-shadow:0 4px 20px rgba(33,83,224,.35)}
.dugme.ana:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(33,83,224,.45);filter:brightness(1.05)}
.dugme.ana:active{transform:translateY(0)}

/* ---------- ÜST ÇUBUK — Clara .top-banner ---------- */
body.kapsul-govde{padding-top:96px}
header.ust.kapsul{
  position:fixed;top:20px;left:20px;right:20px;width:auto;transform:none;z-index:1500;height:60px;
  background:var(--cam);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--cam-kenar);border-radius:60px;box-shadow:0 8px 32px rgba(0,0,0,.12);
  transition:height .45s var(--e-hizli),top .45s var(--e-hizli),left .45s var(--e-hizli),right .45s var(--e-hizli),
    padding .45s var(--e-hizli),border-radius .45s var(--e-hizli),box-shadow .45s var(--e-hizli),transform .45s var(--e-hizli)}
header.ust.kapsul:hover{box-shadow:0 12px 40px rgba(0,0,0,.15);transform:translateY(-1px)}
header.ust.kapsul .kap{padding-inline:12px 12px;min-height:58px;max-width:none}
header.ust.kapsul nav a{padding:8px 12px;border-radius:999px;transition:color .2s ease,background .2s ease}
header.ust.kapsul nav a:hover{background:var(--vurgu-yumusak);color:var(--vurgu-yazi)}
/* liquid glass: aşağı kaydırınca */
header.ust.kapsul.kompakt{
  background:linear-gradient(175deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 40%,rgba(255,255,255,.10) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:.5px solid rgba(255,255,255,.45);
  box-shadow:0 1px 0 0 rgba(255,255,255,.6) inset,0 4px 20px rgba(0,0,0,.07)}
header.ust.kapsul.kompakt:hover{transform:none}
:root[data-theme="dark"] header.ust.kapsul.kompakt{background:linear-gradient(175deg,rgba(22,27,36,.6),rgba(22,27,36,.25))}
#gezinmeKat.gezinme-kat{position:fixed;top:88px;left:20px;right:20px;z-index:1499;border-radius:20px;background:var(--cam);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--cam-kenar);box-shadow:var(--golge-cam)}
@media (max-width:768px){
  body.kapsul-govde{padding-top:80px}
  header.ust.kapsul{top:12px;left:16px;right:16px;height:56px;border-radius:28px}
  header.ust.kapsul .kap{min-height:54px;padding-inline:8px 8px}
  header.ust.kapsul.kompakt{height:42px;top:8px;left:48px;right:48px;border-radius:22px}
  header.ust.kapsul.kompakt .kap{min-height:40px}
  header.ust.kapsul.kompakt .sag>*:not(.menu-dugme){display:none}
  header.ust.kapsul.kompakt .marka b{font-size:15px}
  #gezinmeKat.gezinme-kat{top:76px;left:16px;right:16px}
}

/* ---------- AÇIĞA ÇIKMA — Clara değerleri ---------- */
.perde{overflow:hidden}
.perde>*{display:block;transition:transform .8s ease-out,opacity .6s ease}
.perde>*+*{transition-delay:.1s}
html.gorun-destek .perde:not(.goruldu)>*{transform:translateY(100%);opacity:0}
.olcek{transition:transform .8s var(--e-yumusak),opacity .6s ease-out}
html.gorun-destek .olcek:not(.goruldu){transform:translateY(60px);opacity:0}
.gorun{transition:transform .8s var(--e-yumusak),opacity .6s ease-out;transition-delay:calc(var(--sira,0)*100ms)}
html.gorun-destek .gorun:not(.goruldu){opacity:0;transform:translateY(24px)}
/* İLK EKRANDA AÇIĞA ÇIKMA ANİMASYONU YOK (05.10.2026, SEO hafta 1).
   Sayfanın ilk iki bölümü (ana sayfada kahraman, iç sayfalarda başlık + ilk
   içerik) ilk boyamada son hâliyle durur: solma yok, kayma yok, başlık maskesi
   yok. Neden: (1) opacity:0 başlangıcı "en büyük içerik" zamanını JavaScript +
   solma bitene kadar erteliyordu (telefon LCP 8,9 sn); (2) yalnız kaymaya
   çevrilince ilk karelerde h1'in 2. satırı maskede yarım kalıyor, kart aşağı
   kaymış görünüyordu (05.10 karşılaştırma görüntüsü). Aşağıdaki bölümler
   eskisi gibi solarak/kayarak gelir. */
html.gorun-destek main>section:nth-of-type(-n+2) .gorun,
html.gorun-destek main>section:nth-of-type(-n+2) .olcek,
html.gorun-destek main>section:nth-of-type(-n+2) .perde>*{opacity:1;transform:none}
.pop{opacity:0;transform:translateY(200px) scale(.3);transition:all .8s var(--e-zipla);filter:drop-shadow(0 10px 30px rgba(0,0,0,.25))}
.pop.goruldu{opacity:1;transform:translateY(0) scale(1)}
html:not(.gorun-destek) .pop{opacity:1;transform:none}
.pop[data-index="0"]{transition-delay:0s}.pop[data-index="1"]{transition-delay:.1s}.pop[data-index="2"]{transition-delay:.2s}.pop[data-index="3"]{transition-delay:.3s}.pop[data-index="4"]{transition-delay:.4s}

/* ---------- KAHRAMAN — Clara düzeni: ortalı başlık + form kutusu + akan karusel ---------- */
.kahraman.kahraman-clara{padding:36px 0 0;text-align:center}
.kahraman-clara .kap{display:block}
.kahraman-clara .rozet-satir{margin-inline:auto}
.kahraman-clara h1{font-size:clamp(38px,5.4vw,66px);line-height:1.06;letter-spacing:-.025em;margin:18px auto 14px;max-width:16ch}
.kahraman-clara h1 em{font-style:normal;background:var(--gradyan-yazi);-webkit-background-clip:text;background-clip:text;color:transparent}
.kahraman-clara .alt{max-width:60ch;margin:0 auto 26px;font-size:clamp(16px,1.6vw,19px)}
.canli-kart{
  position:relative;max-width:820px;margin:0 auto;border-radius:24px;padding:22px 22px 18px;text-align:left;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 32px rgba(20,24,33,.12),inset 0 1px 0 rgba(255,255,255,.6);
  transition:all .3s ease}
.canli-kart:focus-within{border-color:rgba(33,83,224,.5);box-shadow:0 4px 20px rgba(0,0,0,.15),0 0 0 3px rgba(33,83,224,.15),inset 0 1px 0 rgba(255,255,255,.3);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}
:root[data-theme="dark"] .canli-kart{background:rgba(22,27,36,.7);border-color:rgba(255,255,255,.1)}
.canli-kart .etiket{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--vurgu-yazi);background:var(--vurgu-yumusak);padding:6px 10px;border-radius:999px;margin-bottom:10px}
.canli-kart .etiket i{width:8px;height:8px;border-radius:50%;background:var(--vurgu);animation:nabiz 2.2s ease-in-out infinite}
@keyframes nabiz{0%,100%{box-shadow:0 0 0 3px rgba(33,83,224,.18)}45%{box-shadow:0 0 0 8px rgba(33,83,224,.12)}}
.canli-kart h2{font-size:21px;line-height:1.2;margin:0 0 4px}
.canli-kart .kucuk{color:var(--metin-3);font-size:13.5px;margin:0 0 14px}
.canli-form{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:10px;align-items:end}
.canli-form label{display:grid;gap:5px;font-size:12.5px;color:var(--metin-2);font-weight:500}
.canli-form label .etk{display:inline-flex;gap:3px;align-items:center}   /* 26.09: .ust ust menu sinifiydi (sticky+cizgi), etiketlere siziyordu */
/* Türkçe form 5 alan: 1. satır ad · işletme · tür, 2. satır telefon · e-posta (İngilizce sayfa 3 alanlı kalır) */
.canli-form.bes-alan{grid-template-columns:repeat(6,minmax(0,1fr))}
.canli-form.bes-alan > .ikili{grid-column:span 2}
.canli-form.bes-alan > .uclu{grid-column:span 3}
.canli-form input[type=text],.canli-form input[type=tel],.canli-form input[type=email],.canli-form select{
  width:100%;padding:13px 14px;font:inherit;font-size:15px;border-radius:14px;border:1px solid var(--cizgi);
  background:var(--yuzey);color:var(--metin);transition:border-color .2s ease,box-shadow .2s ease}
/* Yerel görünümlü select satır yüksekliğini yok sayıyor, girişlerden 5 px
   kısa kalıyordu: görünüm sıfırlanıp ok işareti elle çiziliyor. */
.canli-form select{min-width:0;cursor:pointer;line-height:inherit;-webkit-appearance:none;appearance:none;padding-right:34px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23778' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.canli-form select:invalid{color:var(--metin-3)}   /* "Seçin" yer tutucu gibi soluk */
.canli-form select option{color:var(--metin)}
.canli-form input:focus,.canli-form select:focus{outline:none;border-color:var(--vurgu);box-shadow:0 0 0 4px rgba(33,83,224,.15)}
.canli-form .zor{color:var(--hata);font-weight:700}
.canli-form .kvkk{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--metin-3);font-weight:400;line-height:1.45;margin-top:2px}
.canli-form .kvkk input{margin-top:3px;accent-color:var(--vurgu)}
.canli-form .dugme.ana{grid-column:1/-1;justify-content:center;padding:14px 18px;font-size:16px;border-radius:14px;position:relative;overflow:hidden}
.canli-form .dugme.ana::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}
.canli-form .dugme.ana:hover::before{left:100%}
.canli-kart .dip{margin:10px 0 0;font-size:12.5px;color:var(--metin-3);text-align:center}
.kahraman-clara .guven-serit{justify-content:center;margin:22px auto 0;max-width:900px}
.kahraman-clara .kunye{justify-content:center;margin-top:10px}
@media (max-width:768px){
  .kahraman.kahraman-clara{padding-top:16px}
  .canli-form,.canli-form.bes-alan{grid-template-columns:1fr}
  .canli-form > *,.canli-form.bes-alan > .ikili,.canli-form.bes-alan > .uclu{grid-column:1/-1}
  .canli-kart{padding:18px 16px 14px;border-radius:20px}
}

/* ---------- ÖZELLİK BLOKLARI — Clara tutorial-block ---------- */
.ozellik-blok{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;margin-bottom:40px;border-radius:32px;overflow:hidden;box-shadow:0 8px 32px rgba(20,24,33,.10);border:1px solid var(--cam-kenar)}
.ozellik-blok:last-child{margin-bottom:0}
.ozellik-metin{padding:44px 44px;display:flex;flex-direction:column;justify-content:center;gap:12px;border:0;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.ozellik-metin .simge{width:48px;height:48px;border-radius:14px;background:var(--vurgu-yumusak);color:var(--vurgu-yazi);display:grid;place-items:center}
.ozellik-metin .simge svg{width:24px;height:24px}
.ozellik-metin h3{font-size:clamp(22px,2.5vw,30px);margin:6px 0 0;letter-spacing:-.01em}
.ozellik-metin p{color:var(--metin-2);margin:0;font-size:16.5px;line-height:1.6}
.ozellik-metin .kart-oku{margin-top:10px;display:inline-flex;gap:8px;align-items:center;align-self:flex-start;padding:12px 20px;border-radius:999px;background:var(--gradyan-ana);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 4px 20px rgba(33,83,224,.35);transition:all .3s var(--e-standart)}
.ozellik-metin .kart-oku:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(33,83,224,.45);filter:brightness(1.05)}
.ozellik-metin .kart-oku i{font-style:normal}
.ozellik-medya{position:relative;min-height:400px;display:grid;place-items:center;padding:28px;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%,hsla(199,90%,70%,.7),transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 80%,hsla(250,80%,80%,.6),transparent 60%),
    radial-gradient(ellipse 50% 50% at 60% 40%,hsla(224,95%,72%,.6),transparent 65%),
    linear-gradient(135deg,#C9DAFF,#E6EEFF)}
:root[data-theme="dark"] .ozellik-medya{background:radial-gradient(ellipse 70% 60% at 30% 20%,hsla(199,90%,40%,.5),transparent 60%),radial-gradient(ellipse 60% 70% at 85% 80%,hsla(250,80%,50%,.4),transparent 60%),linear-gradient(135deg,#16213e,#1a1a2e)}
.ozellik-medya .kutu{max-width:min(78%,420px);border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.5);background:#fff;overflow:hidden}
.ozellik-medya .kutu img{display:block;width:100%;height:auto}
.ozellik-medya .egik{transform:perspective(900px) rotateY(-3deg) rotateX(1deg) rotateZ(-.7deg)}
.medya-rozet{position:absolute;left:18px;top:18px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:#1A45BE;font-size:12.5px;font-weight:700;letter-spacing:.03em;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:2}
.ozellik-blok.ters .ozellik-medya{order:1}.ozellik-blok.ters .ozellik-metin{order:2}
.telefon-cerceve{position:relative;width:262px;max-width:70vw;padding:10px;background:#0b0d10;border-radius:46px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),inset 0 0 0 5px #000,0 24px 48px rgba(0,0,0,.28);
  transform:perspective(900px) rotateY(-3deg) rotateX(1deg) rotateZ(-.7deg)}
.telefon-cerceve .centik{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:#0b0d10;border-radius:0 0 14px 14px;z-index:3}
.telefon-cerceve .ekran{aspect-ratio:9/19.4;border-radius:38px;overflow:hidden;background:#000}
.telefon-cerceve video{width:100%;height:100%;object-fit:cover;display:block}
.telefon-etiketler{position:absolute;right:20px;bottom:24px;display:grid;gap:8px;z-index:2}
.telefon-etiketler span{padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.94);color:#141821;font-size:12.5px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:opacity .45s ease,transform .45s ease}
html.gorun-destek .ozellik-blok:not(.goruldu) .telefon-etiketler span{opacity:0;transform:translateY(10px)}
.telefon-etiketler span:nth-child(1){transition-delay:.25s}.telefon-etiketler span:nth-child(2){transition-delay:.6s}.telefon-etiketler span:nth-child(3){transition-delay:.95s}
.yigin{display:flex;align-items:center;justify-content:center;padding:10px}
.yigin .pop{width:150px;margin-left:-28px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.yigin .pop:first-child{margin-left:0}
.yigin .pop img{display:block;width:100%;height:auto}
.yigin .pop[data-index="0"]{z-index:1}.yigin .pop[data-index="1"]{z-index:2}.yigin .pop[data-index="2"]{z-index:3}.yigin .pop[data-index="3"]{z-index:4}.yigin .pop[data-index="4"]{z-index:5}
@media (max-width:900px){
  .ozellik-blok,.ozellik-blok.ters{grid-template-columns:1fr;border-radius:24px}
  .ozellik-blok.ters .ozellik-medya{order:1}.ozellik-blok.ters .ozellik-metin{order:2}
  .ozellik-metin{padding:26px 22px}
  .ozellik-medya{min-height:300px;padding:22px}
  .telefon-etiketler{right:10px;bottom:12px}
  .yigin .pop{width:104px;margin-left:-22px}
}

/* ---------- ADIMLAR / ÇİP AKIŞI / GALERİ / TABLO / FİYAT / SSS / KAPANIŞ ---------- */
.adimlar.cam-adim li{background:var(--cam);border:1px solid var(--cam-kenar);border-radius:18px;padding:22px 22px 22px 64px;box-shadow:var(--golge-cam);position:relative}
.adimlar.cam-adim li::before{background:var(--gradyan-ana);color:#fff;box-shadow:0 6px 16px rgba(33,83,224,.3)}
.serit-akis{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.serit-akis .kutucuklar{display:flex;flex-wrap:nowrap;width:max-content;gap:12px;will-change:transform;padding-block:6px;margin-top:24px}
.serit-akis .kutucuk{white-space:nowrap;background:var(--cam);border:1px solid var(--cam-kenar);box-shadow:var(--golge)}
.galeri.cam figure{border-radius:16px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.galeri.cam figure:hover{transform:translateY(-4px);box-shadow:var(--golge-cam-hover)}
.tablo-kutu.cam{border-radius:18px;overflow:hidden}
.tablo-kutu tr.vurgu-satir td{background:var(--vurgu-yumusak);color:var(--vurgu-yazi)}
.donem.kapsul-sekme{background:var(--cam);border:1px solid var(--cam-kenar);box-shadow:var(--golge);border-radius:999px;padding:4px}
.donem.kapsul-sekme button{border-radius:999px}
.donem.kapsul-sekme button[aria-selected="true"]{background:var(--gradyan-ana);color:#fff}
.plan.one-cikan.cam{border:1.5px solid transparent;background:linear-gradient(var(--yuzey),var(--yuzey)) padding-box,var(--gradyan-ana) border-box;box-shadow:0 14px 44px rgba(33,83,224,.18)}
.plan.one-cikan .plan-rozet{background:var(--gradyan-ana);color:#fff}
.sss.cam-sss details{background:var(--cam);border:1px solid var(--cam-kenar);border-radius:16px;box-shadow:var(--golge);margin-bottom:10px;overflow:hidden}
.sss.cam-sss summary{padding:16px 18px;font-weight:600}
.sss.cam-sss .cevap{padding:0 18px 16px}
.kapanis-bant.cam-kapanis{position:relative;overflow:hidden;border-radius:28px;color:#0F172A;
  background-color:#E8EFFF;
  background-image:
    radial-gradient(ellipse 80% 70% at -10% 50%,hsla(199,85%,60%,.85) 0%,hsla(199,80%,65%,.5) 40%,transparent 70%),
    radial-gradient(ellipse 70% 80% at 110% 50%,hsla(224,95%,68%,.8) 0%,hsla(224,90%,72%,.45) 45%,transparent 75%),
    radial-gradient(ellipse 60% 50% at 50% -10%,hsla(250,95%,80%,.7) 0%,hsla(255,80%,84%,.4) 50%,transparent 80%),
    radial-gradient(ellipse 90% 40% at 50% 120%,hsla(170,60%,72%,.6) 0%,hsla(170,60%,78%,.35) 50%,transparent 80%);
  background-repeat:no-repeat;background-size:100% 100%;box-shadow:0 24px 60px rgba(33,83,224,.18)}
.kapanis-bant.cam-kapanis h2,.kapanis-bant.cam-kapanis p{color:#0F172A}
.kapanis-bant.cam-kapanis .ustetiket{color:#1A45BE}
:root[data-theme="dark"] .kapanis-bant.cam-kapanis{background-color:#16213e;color:#fff}
:root[data-theme="dark"] .kapanis-bant.cam-kapanis h2,:root[data-theme="dark"] .kapanis-bant.cam-kapanis p{color:#fff}

/* ---------- YORUM DUVARI — Clara testimonials ---------- */
.yorumlar{padding-bottom:48px}
.yorum-duvar{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.yorum-satirlar{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.yorum-satir{display:flex;gap:20px;width:max-content;will-change:transform}
.yorum-kart{position:relative;flex:0 0 auto;width:320px;border-radius:16px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;transition:transform .3s ease,box-shadow .3s ease}
.yorum-kart:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.3)}
.yorum-metin{margin:0;font-size:14.5px;line-height:1.6;color:var(--metin-2);font-style:italic;flex:1}
.yorum-kisi{display:flex;align-items:center;gap:12px}
.yorum-avatar{width:40px;height:40px;border-radius:50%;background:var(--gradyan-ana);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:0 0 auto}
.yorum-kisi b{display:block;font-size:14px;color:var(--metin)}
.yorum-kisi div span{display:block;font-size:12.5px;color:var(--metin-3)}
.ornek-etiket{position:absolute;top:12px;right:12px;padding:3px 8px;border-radius:999px;background:var(--hata-yumusak);color:var(--hata);font-size:10.5px;font-weight:700;letter-spacing:.06em}
.yorum-yildiz{color:#F5A524;font-size:13px;letter-spacing:1px}

.akan-kart.dikey2{aspect-ratio:2/3}.akan-kart.dikey2 img{height:100%}
.akan-kart.tanitim .oynat-kat{border-radius:18px}

/* kp.css .kahraman iki sütunlu ızgara kuruyor; Clara düzeni tek sütun */
.kahraman.kahraman-clara{display:block;grid-template-columns:none}
.kahraman.kahraman-clara>.kap{display:block;width:min(var(--en),calc(100% - 32px));margin-inline:auto}
.kahraman-clara .guven-serit{flex-wrap:wrap;gap:10px 22px}
.kahraman-clara .rozet-satir{display:inline-flex}

/* ============================================================
   21.09.2026 — ENES'İN DÜZENİ
   1. ekran: kahraman TEK SAYFAYA sığıyor (güven şeridi dâhil)
   2. ekran: ORTADA tanıtım filmi + altında iki ürün videosu,
             SOL/SAĞDA akan katalog sütunları; videoda ses var
   S.S.S. Clara'daki gibi büyük puntolu
   Altlık Clara'daki gibi beş sütun + ortalı künye
   ============================================================ */

/* ---------- TAM EKRAN BÖLÜM ----------
   Enes: "tam sayfa 1 sayfa otursun" — güven şeridi ve künye DÂHİL
   ilk ekranda görünmeli. 21.09 ölçümü: ilk kurguda içerik 992px'e
   çıkıyordu, 1366x860'ta künye 132px aşağıda kalıyordu. Aşağıdaki
   değerler o ölçüme göre kısıldı; 850px'den kısa ekranlarda ayrıca
   bir kademe daha daralıyor. */
.tam-ekran{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:14px}
.kahraman.kahraman-clara.tam-ekran{padding-top:0;padding-bottom:10px;min-height:calc(100svh - 96px)}
.kahraman-clara.tam-ekran .rozet-satir{font-size:12.5px;padding-block:6px}
.kahraman-clara.tam-ekran h1{font-size:clamp(28px,3.6vw,46px);margin:10px auto 8px;max-width:18ch}
.kahraman-clara.tam-ekran .alt{margin-bottom:14px;font-size:clamp(14.5px,1.3vw,16.5px);max-width:76ch}
.kahraman-clara.tam-ekran .canli-kart{padding:15px 18px 11px;border-radius:20px}
.kahraman-clara.tam-ekran .canli-kart .etiket{margin-bottom:7px;padding:5px 9px;font-size:11.5px}
.kahraman-clara.tam-ekran .canli-kart h2{font-size:18px}
.kahraman-clara.tam-ekran .canli-kart .kucuk{margin-bottom:9px;font-size:13px}
.kahraman-clara.tam-ekran .canli-form{gap:8px}
.kahraman-clara.tam-ekran .canli-form input,.kahraman-clara.tam-ekran .canli-form select{padding:10px 12px;font-size:14.5px}
.kahraman-clara.tam-ekran .canli-form .dugme.ana{padding:11px 18px;font-size:15px;margin-top:2px}
.kahraman-clara.tam-ekran .canli-kart .dip{margin-top:7px;font-size:12px}
.kahraman-clara.tam-ekran .eylemler{margin-top:13px}
.kahraman-clara.tam-ekran .risk{margin:8px 0 0}
.kahraman-clara.tam-ekran .kunye{margin-top:7px}
/* BEŞ ALAN TEK SATIR (26.09, Enes: "ana sayfa ilk açılışta tam otursun, alttaki yazılar görünsün").
   Ad soyad + işletme türü eklenince form ikinci satıra taştı ve kahramanın altı ekrandan çıktı;
   geniş ekranda beş alan yan yana, dar ekranda iki satır (yukarıdaki .ikili/.uclu). */
@media (min-width:1200px){
  .canli-form.bes-alan{grid-template-columns:1.05fr 1.05fr .9fr .95fr 1.15fr}
  .canli-form.bes-alan > .ikili,.canli-form.bes-alan > .uclu{grid-column:auto}
  .canli-form.bes-alan input[type=text],.canli-form.bes-alan input[type=tel],.canli-form.bes-alan input[type=email],.canli-form.bes-alan select{font-size:14px}
}
/* güven şeridi TEK SATIR — kahraman bir ekrana sığsın diye */
.guven-serit.tek-satir{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:12px auto 0;max-width:1200px}
.guven-serit.tek-satir span{font-size:12.5px;white-space:nowrap;gap:5px}
.guven-serit.tek-satir svg{width:13px;height:13px}
/* Kısa ekran (1366x768 dizüstü): bir kademe daha daralt */
@media (min-width:901px) and (max-height:850px){
  .kahraman-clara.tam-ekran h1{font-size:clamp(26px,3vw,38px);margin:7px auto 6px}
  .kahraman-clara.tam-ekran .alt{margin-bottom:11px;font-size:14.5px;max-width:84ch}
  .kahraman-clara.tam-ekran .canli-kart{padding:13px 16px 9px}
  .kahraman-clara.tam-ekran .canli-kart h2{font-size:16.5px}
  .kahraman-clara.tam-ekran .canli-kart .kucuk{display:none}
  .kahraman-clara.tam-ekran .canli-form input,.kahraman-clara.tam-ekran .canli-form select{padding:9px 11px}
  .kahraman-clara.tam-ekran .eylemler{margin-top:10px}
  .guven-serit.tek-satir{margin-top:9px}
}
/* 1366x768 dizüstü: son kademe. Üst çubuk boşluğu da kısalıyor. */
@media (min-width:901px) and (max-height:800px){
  body.kapsul-govde{padding-top:84px}
  .kahraman.kahraman-clara.tam-ekran{min-height:calc(100svh - 84px)}
  .kahraman-clara.tam-ekran h1{font-size:32px;margin:6px auto 5px}
  .kahraman-clara.tam-ekran .alt{margin-bottom:9px;font-size:14px}
  .kahraman-clara.tam-ekran .rozet-satir{font-size:12px;padding-block:5px}
  .kahraman-clara.tam-ekran .canli-kart{padding:11px 14px 8px}
  .kahraman-clara.tam-ekran .canli-form input,.kahraman-clara.tam-ekran .canli-form select{padding:8px 11px;font-size:14px}
  .kahraman-clara.tam-ekran .canli-form .dugme.ana{padding:10px 16px}
  .kahraman-clara.tam-ekran .eylemler .dugme{padding-block:9px;font-size:14px}
  .guven-serit.tek-satir{margin-top:7px;padding-top:9px}
  .guven-serit.tek-satir span{font-size:12px}
}
/* 901-1199 px: form iki satır kaldığı için alttaki IP notu kısa tutulur */
@media (min-width:901px) and (max-width:1199px){.kahraman-clara.tam-ekran .canli-kart .dip.ince{display:none}}
/* Çok kısa dizüstü ekranı (1366x768'de tarayıcı ~660 px bırakıyor; 26.09 ölçümü şerit 67 px taşıyordu) */
@media (min-width:901px) and (max-height:740px){
  .kahraman-clara.tam-ekran .rozet-satir{display:none}
  .kahraman-clara.tam-ekran h1{margin-top:2px}
  .kahraman-clara.tam-ekran .canli-kart .dip.ince{display:none}
  .kahraman-clara.tam-ekran .canli-kart .etiket{margin-bottom:5px}
  .kahraman-clara.tam-ekran .eylemler{margin-top:8px}
  .kahraman-clara.tam-ekran .risk{margin-top:5px}
}
@media (max-width:900px){
  .tam-ekran{min-height:0;padding-block:8px}
  .kahraman.kahraman-clara.tam-ekran{min-height:0}
  .guven-serit.tek-satir span{white-space:normal}
}

/* ---------- 2. EKRAN: SAHNE ----------
   ÜÇ SÜTUN DA AKIYOR (Enes, 21.09 2. tur): sol aşağı, orta yukarı,
   sağ aşağı — Clara'nın hero karuselindeki gibi. Önce orta sütun
   sabitti (film + altında iki video); artık o da akıyor ve tanıtım
   filmi de ürün videoları gibi davranıyor: imleç gelince oynuyor ve
   sesi açılıyor.

   YÜKSEKLİK TEK DEĞİŞKENDEN: yüzde zinciri ızgara öğesinde kopup
   aspect-ratio yüksekliğini 3049px'e fırlatmıştı (21.09 ölçümü). */
.sahne .bolum-bas{margin-bottom:18px}
.sahne-izgara{
  --sahne-h:clamp(520px,80svh,800px);
  display:grid;grid-template-columns:minmax(0,236px) minmax(0,304px) minmax(0,236px);
  grid-template-rows:var(--sahne-h);
  gap:18px;align-items:stretch;justify-items:center;justify-content:center;
  width:min(1100px,calc(100% - 32px));margin-inline:auto;height:var(--sahne-h)}
.sahne-izgara>*{min-width:0;min-height:0}
.sahne-sutun{position:relative;height:var(--sahne-h);width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}
.sahne-sarma{display:flex;flex-direction:column;gap:14px;will-change:transform}
.sahne-kart{margin:0;border-radius:16px;overflow:hidden;background:var(--cam);border:1px solid var(--cam-kenar);
  box-shadow:var(--golge-cam);transition:transform .3s ease,box-shadow .3s ease}
.sahne-kart:hover{transform:translateY(-4px);box-shadow:var(--golge-cam-hover)}
.sahne-kart img{display:block;width:100%;height:auto}
.sahne-kart figcaption{padding:8px 10px;font-size:12px;font-weight:600;color:var(--metin-3);text-align:center}

/* orta sütundaki videolar — akan sütunun içinde, tam genişlik */
.sahne-video{position:relative;width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:#0b0d10;box-shadow:0 14px 34px rgba(0,0,0,.24);border:1px solid var(--cam-kenar);
  transition:transform .3s var(--e-standart),box-shadow .3s var(--e-standart);cursor:pointer}
.sahne-video video{width:100%;height:100%;object-fit:cover;display:block}
.sahne-video:hover{transform:scale(1.03);box-shadow:0 22px 50px rgba(0,0,0,.34);z-index:3}
.sahne-video .ad{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 9px;border-radius:999px;
  background:rgba(10,13,20,.55);color:#fff;font-size:11.5px;font-weight:600;text-align:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .25s ease}
.sahne-video .ses-rozet{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;
  gap:4px;padding:4px 9px 4px 7px;border-radius:999px;background:rgba(10,13,20,.62);color:#fff;font-size:11px;
  white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .25s ease;pointer-events:none}
.sahne-video .ses-rozet svg{width:12px;height:12px;flex:0 0 auto}
.sahne-video .ses-rozet b{font-weight:600}
.sahne-video.ses-acik .ses-rozet{opacity:0}
.sahne-video.ses-acik .ad{opacity:0}
.sahne-video.ses-acik::after{content:"\266A ses acik";position:absolute;left:8px;top:8px;padding:4px 10px;
  border-radius:999px;background:var(--vurgu);color:#fff;font-size:11px;font-weight:700}
@media (max-width:900px){
  .sahne-izgara{grid-template-columns:minmax(0,260px);height:auto;gap:16px}
  .sahne-sutun.sol,.sahne-sutun.sag{display:none}
  .sahne-sutun.orta{height:clamp(420px,72svh,620px)}
}

/* ---------- S.S.S. — Clara düzeni: büyük punto, ince çizgi ----------
   DİKKAT: kp.css `.sss summary::after`ı border-right/border-bottom +
   rotate(45deg) ile bir OK çiziyor. Buradaki artı işaretini üstüne
   koyunca ikisi üst üste binip karmaşık bir çizim çıktı (21.09
   ekran görüntüsü). O yüzden kenarlıklar ve dönüş AÇIKÇA sıfırlanıyor. */
.sss.sss-buyuk{max-width:960px;margin:30px auto 0;border:0;border-radius:0;background:transparent;overflow:visible}
.sss.sss-buyuk details{background:transparent;border:0;border-bottom:1px solid var(--cizgi);
  border-radius:0;box-shadow:none;margin:0;overflow:hidden}
.sss.sss-buyuk details:first-child{border-top:1px solid var(--cizgi)}
.sss.sss-buyuk details:last-child{border-bottom:1px solid var(--cizgi)}
.sss.sss-buyuk summary{position:relative;display:block;list-style:none;cursor:pointer;
  padding:26px 60px 26px 2px;font-size:clamp(17px,1.9vw,23px);font-weight:600;line-height:1.35;
  letter-spacing:-.01em;color:var(--metin);background:transparent;transition:color .2s ease}
.sss.sss-buyuk summary::-webkit-details-marker{display:none}
.sss.sss-buyuk summary:hover{color:var(--vurgu-yazi);background:transparent}
.sss.sss-buyuk summary::after{
  content:"";position:absolute;right:10px;top:50%;width:20px;height:20px;margin:-10px 0 0;
  border:0;transform:none;transition:transform .3s var(--e-standart);
  background:
    linear-gradient(currentColor,currentColor) center/20px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 20px no-repeat}
.sss.sss-buyuk details[open] summary{color:var(--vurgu-yazi)}
.sss.sss-buyuk details[open] summary::after{transform:rotate(45deg)}
.sss.sss-buyuk .cevap{padding:0 60px 26px 2px;font-size:16.5px;line-height:1.7;color:var(--metin-2);max-width:74ch}
.sss-bant .eylemler{margin-top:30px}

/* ---------- YORUMLAR: taslak notu ---------- */
.taslak-not{color:var(--metin-3);font-size:14px}

/* ---------- ALTLIK — Clara düzeni ---------- */
footer.altlik-clara{background:var(--yuzey-2);border-top:1px solid var(--cizgi);padding-block:52px 28px;margin-top:0}
footer.altlik-clara .altlik-izgara{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr 1fr;gap:34px}
footer.altlik-clara .altlik-hakkinda .marka{display:inline-flex;align-items:center;gap:9px;margin-bottom:12px}
footer.altlik-clara .altlik-hakkinda p{color:var(--metin-3);font-size:13.5px;line-height:1.65;margin:0;max-width:42ch}
footer.altlik-clara h4{font-size:15px;font-weight:700;margin:0 0 14px;color:var(--metin)}
footer.altlik-clara ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer.altlik-clara ul a{color:var(--vurgu-yazi);text-decoration:none;font-size:13.5px;line-height:1.5}
footer.altlik-clara ul a:hover{text-decoration:underline}
footer.altlik-clara .altlik-son{margin-top:40px;padding-top:22px;border-top:1px solid var(--cizgi);text-align:center}
footer.altlik-clara .altlik-son p{margin:0 0 6px;color:var(--metin-3);font-size:12.5px;line-height:1.6}
footer.altlik-clara .altlik-son p:last-child{margin-bottom:0;max-width:78ch;margin-inline:auto}
@media (max-width:980px){
  footer.altlik-clara .altlik-izgara{grid-template-columns:1fr 1fr;gap:28px}
  footer.altlik-clara .altlik-hakkinda{grid-column:1/-1}
}
@media (max-width:560px){
  footer.altlik-clara .altlik-izgara{grid-template-columns:1fr}
}

/* ---------- İÇ SAYFALAR ---------- */
.sayfa-bas{padding-block:46px 10px}
.sayfa-bas h1{font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.02em;margin:10px auto 12px;max-width:20ch}
.sayfa-bas .giris{max-width:70ch;margin-inline:auto}
/* özellik bloğunda numara + madde listesi */
.ozellik-metin .ustetiket{margin:0;font-size:12.5px;letter-spacing:.12em;color:var(--vurgu-yazi)}
.ozellik-metin ul.onay{margin:6px 0 0;display:grid;gap:9px}
.ozellik-metin ul.onay li{font-size:15px;color:var(--metin-2);line-height:1.55}
/* yatay (16:9) ekran kaydı kutusu */
.ozellik-medya .kutu.yatay{max-width:min(94%,520px);border-radius:14px;overflow:hidden;background:#0b0d10;
  box-shadow:0 20px 44px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.5)}
.ozellik-medya .kutu.yatay video{display:block;width:100%;height:auto}
/* ortalanmış tek telefon */
.tek-telefon{display:flex;justify-content:center;margin-top:30px}
.tek-telefon .telefon-cerceve{transform:none}
.tek-telefon .ekran{position:relative}
/* geniş galeri — Örnekler sayfası */
.galeri.cam.genis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:34px}
.galeri.cam.genis figure{margin:0;border-radius:16px;overflow:hidden;background:var(--cam);
  border:1px solid var(--cam-kenar);box-shadow:var(--golge-cam)}
.galeri.cam.genis figure img{display:block;width:100%;height:auto}
.galeri.cam.genis figcaption{padding:11px 13px;display:grid;gap:2px}
.galeri.cam.genis figcaption b{font-size:13.5px;color:var(--metin)}
.galeri.cam.genis figcaption span{font-size:12px;color:var(--metin-3)}
/* iç sayfada kahraman tam ekran değil */
body.ic-sayfa .tam-ekran{min-height:0}

/* ============================================================
   21.09 · 2. TUR — Enes'in bölüm bölüm notları
   ============================================================ */

/* ---------- İMLEÇLE OYNAYAN VİDEOLAR (Özellikler / Örnekler) ----------
   Enes: "videonun üstüne gelince çalışsın, gidince dursun."
   Rozet dururken görünüyor, oynarken kayboluyor. */
[data-hover]{position:relative;cursor:pointer}
[data-hover] .ses-rozet,
.telefon-cerceve .ses-rozet{position:absolute;left:10px;top:10px;z-index:4;
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;
  background:rgba(10,13,20,.66);color:#fff;font-size:11px;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .25s ease;pointer-events:none}
[data-hover] .ses-rozet svg{width:12px;height:12px;flex:0 0 auto}
[data-hover] .ses-rozet b{font-weight:600}
/* Rozet, ses AÇILANA kadar duruyor (imlece gelince kaybolmuyor):
   tarayici ilk tiklamadan once sesi actirmiyor, bunu soylemesi gerek. */
[data-hover].ses-acik .ses-rozet{opacity:0}
.ses-gel{display:none}
body.ses-serbest .ses-tikla{display:none}
body.ses-serbest .ses-gel{display:inline}
[data-hover].ses-acik::after{content:"\266A";position:absolute;left:10px;top:10px;z-index:4;
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--vurgu);color:#fff;font-size:12px;font-weight:700}
/* ekran kaydı kutusu: mevcut sitedeki ince çerçeve dili */
.ozellik-medya .kutu.yatay{transition:transform .35s var(--e-standart),box-shadow .35s var(--e-standart)}
.ozellik-medya .kutu.yatay:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 26px 56px rgba(0,0,0,.28)}
.telefon-cerceve[data-hover]:hover{transform:perspective(900px) rotateY(-3deg) rotateX(1deg) rotateZ(-.7deg) scale(1.03)}
.tek-telefon .telefon-cerceve[data-hover]:hover{transform:scale(1.03)}

/* ---------- ÖRNEKLER: akan duvar ----------
   Enes: "yorumlar gibi sağdan sola soldan sağa gitsin, tıklayınca
   büyüsün." Büyüteç kp.js'in `.galeri` kancası — sarmalayıcıda o
   sınıf DURUYOR, yalnız ızgara düzeni iptal ediliyor. */
.ornek-duvar{display:block;margin-top:30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ornek-satir{display:flex;gap:18px;width:max-content;margin-bottom:18px;will-change:transform}
.ornek-satir:last-child{margin-bottom:0}
.ornek-satir figure{flex:0 0 auto;width:236px;margin:0;border-radius:16px;overflow:hidden;
  background:var(--cam);border:1px solid var(--cam-kenar);box-shadow:var(--golge-cam);
  transition:transform .3s var(--e-standart),box-shadow .3s var(--e-standart);cursor:zoom-in}
.ornek-satir figure:hover{transform:translateY(-5px) scale(1.03);box-shadow:var(--golge-cam-hover);z-index:2}
.ornek-satir figure img{display:block;width:100%;height:auto}
.ornek-satir figcaption{padding:10px 12px;display:grid;gap:2px}
.ornek-satir figcaption b{font-size:13px;color:var(--metin)}
.ornek-satir figcaption span{font-size:11.5px;color:var(--metin-3)}
@media (max-width:600px){.ornek-satir figure{width:190px}}

/* ---------- FİYAT: eşit kartlar, kademeli özellik, mavi tık ---------- */
.planlar.esit{align-items:stretch}
.planlar.esit .plan{display:flex;flex-direction:column;height:100%}
.planlar.esit .plan .onay{flex:1}
.planlar.esit .plan .eylemler{margin-top:4px}
.plan-ara{margin:18px 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--metin-3)}
/* en çok tercih edilen: mavi tık + belirgin kenar */
.plan.one-cikan .onay li::before,
.plan.one-cikan .onay li::marker{color:var(--vurgu)}
.plan.one-cikan .onay li svg{color:var(--vurgu)}
.plan.one-cikan{position:relative}
.plan.one-cikan .plan-rozet{background:var(--gradyan-ana);color:#fff;letter-spacing:.04em}
/* ABONELİK ROZETİ (12.10.2026, konsept 4 "Katalog sayfaları") — kartın başlık
   satırında, h3'ün solunda. Renkli kutu GÖRSELİN İÇİNDE çizili (deneme turuncu,
   basic mavi, pro mor→turkuaz): etrafına zemin/gölge/çerçeve KONMAZ, çift kutu
   olur. Görseller /m/abonelik/<paket>-96|144.webp. */
.abonelik-bas{display:flex;align-items:center;gap:12px;min-width:0}
.abonelik-bas h3{margin:0;min-width:0}
.abonelik-rozet{flex:none;width:48px;height:48px;display:block}
@media (max-width:400px){.abonelik-rozet{width:44px;height:44px}.abonelik-bas{gap:10px}}

/* ---------- KURUMSAL BANDI (Clara'daki gibi) ---------- */
.kurumsal-bant{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:38px auto 0;max-width:980px;padding:26px 30px;border-radius:20px;
  background:var(--cam);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--cam-kenar);box-shadow:var(--golge-cam)}
.kurumsal-bant h3{margin:0 0 6px;font-size:20px}
.kurumsal-bant p{margin:0;color:var(--metin-2);font-size:15px;max-width:62ch}
.kurumsal-bant .dugme{white-space:nowrap}
@media (max-width:700px){.kurumsal-bant{padding:22px 20px}.kurumsal-bant .dugme{width:100%;justify-content:center}}

/* ---------- ÖRNEKLER: aradaki videolar ---------- */
.ornek-video{position:relative;flex:0 0 auto;width:236px;border-radius:16px;overflow:hidden;
  background:#0b0d10;border:1px solid var(--cam-kenar);box-shadow:var(--golge-cam);
  transition:transform .3s var(--e-standart),box-shadow .3s var(--e-standart)}
.ornek-video:hover{transform:translateY(-5px) scale(1.03);box-shadow:var(--golge-cam-hover);z-index:2}
.ornek-video video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.ornek-yazi{display:grid;gap:2px;padding:10px 12px;background:var(--cam)}
.ornek-yazi b{font-size:13px;color:var(--metin)}
.ornek-yazi span{font-size:11.5px;color:var(--metin-3)}
@media (max-width:600px){.ornek-video{width:190px}}

/* IP notu — formun altında, en küçük punto (Enes: "altın ufak olsa") */
.canli-kart .dip.ince{margin-top:4px;font-size:11px;color:var(--metin-3);opacity:.85;line-height:1.5}


/* ============================================================
   TELEFON DÜZENİ (21.09 denetimi) — Enes: "telefonda farklı geliyor"
   ============================================================ */
@media (max-width:900px){
  /* SAHNE: iki sütun — kataloglar + videolar. Sağ sütunun kartları
     JS ile sola taşınıyor, kendisi gizleniyor. */
  .sahne-izgara{
    --sahne-h:clamp(380px,58svh,520px);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;height:var(--sahne-h);width:calc(100% - 28px)}
  .sahne-sutun.sol,.sahne-sutun.orta{display:block;height:var(--sahne-h);max-width:none}
  .sahne-sutun.sag{display:none}
  .sahne-sarma{gap:10px}
  .sahne-kart{border-radius:12px}
  .sahne-kart figcaption{padding:6px 8px;font-size:10.5px}
  .sahne-video{border-radius:14px}
  .sahne-video .ad{font-size:10px;padding:4px 7px;left:6px;right:6px;bottom:6px}
  .sahne-video .ses-rozet,[data-hover] .ses-rozet{font-size:9.5px;padding:3px 7px 3px 5px;left:6px;top:6px}
  .sahne-video .ses-rozet svg{width:10px;height:10px}

  /* KAHRAMAN: telefonda uzuyordu — güven şeridi iki sütuna,
     boşluklar kısaldı. */
  .guven-serit.tek-satir{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
    text-align:left;margin-top:14px;padding-top:12px}
  .guven-serit.tek-satir span{font-size:11.5px;align-items:flex-start}
  .kahraman-clara.tam-ekran .alt{margin-bottom:12px;font-size:15px}
  .kahraman-clara.tam-ekran h1{font-size:clamp(26px,7.4vw,34px);max-width:none}
  .kahraman-clara .kunye{gap:8px;font-size:11.5px}

  /* ÖZELLİK BLOĞU: telefonda medya kutusu daralsın */
  .ozellik-medya .kutu.yatay{max-width:100%}
  .ozellik-metin ul.onay li{font-size:14px}

  /* FİYAT: kurumsal bandı tek sütun */
  .kurumsal-bant{flex-direction:column;align-items:flex-start;text-align:left}

  /* ALTLIK: Clara'daki gibi ama tek sütun okunur kalsın */
  footer.altlik-clara{padding-block:36px 22px}
  footer.altlik-clara .altlik-son p{font-size:11.5px}
}
@media (max-width:420px){
  .sahne-izgara{--sahne-h:clamp(340px,52svh,440px);gap:10px}
  .ornek-satir figure,.ornek-video{width:170px}
  .yorum-kart{width:270px}
}

/* ============================================================
   AKIŞ — JAVASCRIPT DÖNGÜSÜ (21.09 akşam)
   CSS animasyonu KULLANILMIYOR: kp.css:2131, Windows'ta "animasyonları
   göster" kapalıysa her CSS animasyonunun süresini 0,01 ms'ye indiriyor
   ve döngü "uçuyordu" (Enes'in Windows'unda bu ayar kapalı). Konumu
   kp-clara.js her karede transform ile yazıyor; o kural ona işlemez.
   ============================================================ */
/* Compositor katmanı: kayma sırasında yeniden boyama olmasın */
.sahne-sarma.akiyor,.ornek-satir.akiyor,.yorum-satir.akiyor,.kutucuklar.akiyor{
  will-change:transform;backface-visibility:hidden}
/* Kayan kartlar içinde pahalı efekt olmasın — cam bulanıklığı her
   karede yeniden hesaplanıyor ve takılmanın ikinci sebebi oydu. */
.sahne-sarma .sahne-kart,.ornek-satir figure,.ornek-satir .ornek-video,.yorum-satir .yorum-kart{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--yuzey)}
.sahne-sarma .sahne-video{background:#0b0d10}

/* Duraklatma JS'te (mouseenter/mouseleave, yalnız hover:hover cihazda). */

/* ============================================================
   İMLEÇ YAKINLAŞTIRMASI — Clara birebir (21.09 gece, Enes istedi)
   video_carousel.css: --video-scale 1.06, transition transform .3s
   ease-out, hover'da z-index 10 ve YALNIZ büyüme (gölge/yükselme
   yok); komşular JS ile %3 itiliyor (push-up/push-down); kapsayıcı
   kenarları maskeyle soluyor.
   ============================================================ */
.sahne-izgara{--buyume:1.06;--itme:3%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ornek-duvar,.ornek-satirlar{--buyume:1.06;--itme:3%}
.sahne-kart,.sahne-video,.ornek-satir figure,.ornek-video,[data-hover].kutu-video{
  transition:transform .3s ease-out;will-change:transform}
@media (hover:hover){
  .sahne-kart:hover,.sahne-video:hover,.ornek-satir figure:hover,.ornek-video:hover,[data-hover].kutu-video:hover{
    transform:scale(var(--buyume,1.06));z-index:10;box-shadow:var(--golge-cam)}
  .sahne-video:hover{box-shadow:0 14px 34px rgba(0,0,0,.24)}
  /* komşular yer açıyor */
  .sahne-sarma>.it-geri{transform:translate3d(0,calc(-1 * var(--itme,3%)),0)}
  .sahne-sarma>.it-ileri{transform:translate3d(0,var(--itme,3%),0)}
  .ornek-satir>.it-geri{transform:translate3d(calc(-1 * var(--itme,3%)),0,0)}
  .ornek-satir>.it-ileri{transform:translate3d(var(--itme,3%),0,0)}
}

/* ============================================================
   TANITIM FİLMİ SAYFASI (21.09 gece)
   ============================================================ */
.film-bolum{padding-block:8px 40px}
.film-medya{min-height:560px}
.film-cerceve{position:relative;width:min(340px,72vw);aspect-ratio:9/16;border-radius:26px;overflow:hidden;
  background:#0b0d10;box-shadow:0 24px 60px rgba(0,0,0,.28);border:1px solid var(--cam-kenar);
  transition:transform .3s ease-out;cursor:pointer;will-change:transform}
.film-cerceve video{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){.film-cerceve:hover{transform:scale(1.02)}}
.film-cerceve .ses-rozet{position:absolute;left:12px;top:12px;z-index:4}

.vm-secim{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.vm-secim input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.vm-secim label{padding:9px 16px;border-radius:999px;border:1px solid var(--cam-kenar);background:var(--cam);
  cursor:pointer;font-weight:600;font-size:14px;transition:background .2s ease,color .2s ease}
.vm-secim input:checked+label{background:var(--vurgu);color:#fff;border-color:var(--vurgu)}
.vm-secim input:focus-visible+label{outline:2px solid var(--vurgu);outline-offset:2px}
.vm-izgara{display:none;grid-template-columns:1fr 1fr;gap:20px;width:100%;margin-top:22px}
#vm1:checked~[data-secenek="1"],#vm2:checked~[data-secenek="2"],#vm3:checked~[data-secenek="3"]{display:grid}
.vm-kart{background:var(--cam);border:1px solid var(--cam-kenar);border-radius:24px;padding:30px 30px 28px;box-shadow:var(--golge-cam)}
.vm-kart .ustetiket{margin:0 0 8px}
.vm-kart h3{font-size:clamp(20px,2.1vw,26px);line-height:1.25;margin:0 0 12px;text-wrap:balance}
.vm-kart p:last-child{opacity:.78;font-size:15.5px;line-height:1.7;margin:0}
@media (max-width:760px){.vm-izgara{grid-template-columns:1fr}.vm-kart{padding:24px 22px}}

.guven-bolum{padding-block:56px 40px}
.guven-bolum .kart p{line-height:1.65}

/* v20: tek metin, sekme yok; değer çipleri */
.vm-izgara.tek{display:grid;margin-top:28px}
.degerler{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.deger{display:flex;flex-direction:column;gap:3px;padding:14px 18px;border-radius:16px;
  background:var(--vurgu-yumusak);border:1px solid var(--cam-kenar)}
.deger b{font-size:14.5px}
.deger span{font-size:13px;opacity:.75}
@media (max-width:760px){.degerler{grid-template-columns:1fr}}

/* v23: Örnekler — tıklayınca büyütme kalktı (kp.js `.galeri` kancası
   sökülü), imleç normal; altına açıklama. */
.ornek-satir figure,.ornek-video{cursor:default}
.ornek-aciklama{max-width:76ch;margin:26px auto 0;text-align:center;
  font-size:14.5px;line-height:1.75;color:var(--metin-2,var(--soluk))}
.ornek-aciklama b{color:var(--metin)}

/* ============================================================
   TEMA DÜZELTMESİ (21.09) — SİSTEM KARANLIĞI
   Aşağıdaki bileşenler yalnız `:root[data-theme="dark"]` altında
   tanımlıydı; sistem karanlığında damga olmadığı için hiç
   uygulanmıyor, sayfa koyu olurken kartlar beyaz kalıyordu.
   `:root:not([data-theme="light"])` koruması: kullanıcı açıkça
   "Açık" seçmişse telefon karanlık olsa bile bu blok devreye girmez.
   ============================================================ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .canli-kart{
    background:rgba(22,27,36,.7);border-color:rgba(255,255,255,.1)}
  :root:not([data-theme="light"]) header.ust.kapsul.kompakt{
    background:linear-gradient(175deg,rgba(22,27,36,.6),rgba(22,27,36,.86))}
  :root:not([data-theme="light"]) .ozellik-medya{
    background:radial-gradient(ellipse 70% 60% at 30% 20%,hsla(199,90%,40%,.5),transparent 60%),
               radial-gradient(ellipse 60% 70% at 85% 80%,hsla(250,80%,50%,.4),transparent 60%),
               linear-gradient(135deg,#16213e,#1a1a2e)}
  :root:not([data-theme="light"]) .kapanis-bant.cam-kapanis{background-color:#16213e;color:#fff}
  :root:not([data-theme="light"]) .kapanis-bant.cam-kapanis h2,
  :root:not([data-theme="light"]) .kapanis-bant.cam-kapanis p{color:#fff}
  /* değer çipleri ve vizyon kartları da koyu zemine geçsin */
  :root:not([data-theme="light"]) .deger{background:rgba(255,255,255,.06)}
}

/* ============================================================
   ÖRNEK KARTI BOŞLUĞU (21.09) — Enes: "ürünlerin altında boşluk var,
   videolar gibi tam sığsın."
   Kart yüksekliği içerikten geliyordu; satırdaki en uzun karta göre
   esneyince kısa kartların GÖRSELİ altında boşluk bırakıyordu.
   Videolarda olmuyor çünkü onlar `aspect-ratio` ile sabit. Aynı oran
   kartlara da veriliyor; görsel `object-fit:cover` ile kutuyu
   dolduruyor, yazı altta kendi şeridinde kalıyor.
   ============================================================ */
/* ÖLÇÜLDÜ (21.09): kartlar satır yüksekliğine (480px) uzuyor ama
   görsel 330px'de kalıyordu; aradaki ~150px BEYAZ BOŞLUK olarak
   görünüyordu. Videolarda yok çünkü onlar kutuyu dolduruyor.
   Görsel artık kalan alanı kaplıyor: yazı kendi şeridinde, görsel
   geri kalanın tamamında. */
/* 05.10.2026 — Enes: "Örnekler sayfasında hiçbir katalog düzgün gözükmüyor,
   görseller tam gözükmeli, fiyatlar ana sayfadaki gibi olmalı."
   ÖLÇÜLDÜ: yukarıdaki `object-fit:cover` 21.09'dan beri broşürleri yanlardan
   kırpıyordu (kartlar 9:16 videonun boyuna uzuyor, A4 görsel %30 kesiliyordu);
   panelden eklenen kare görselde kesilen pay %50'ye çıktı, fiyatlar yarım kaldı.
   YENİ DÜZEN (ana sayfadaki gibi görsel kendi oranında): şeritte bütün kartların
   GÖRSEL YÜKSEKLİĞİ AYNI (--ornek-h), genişliği görselin kendi oranından gelir
   (HTML'deki width/height nitelikleri sayesinde görsel inmeden de doğru). Kırpma
   yok. Video da aynı yükseklikte, 9:16 genişliğiyle. Yazı şeridi tek satır,
   her kartta aynı boy: şerit yüksekliği tutarlı kalır.
   --ornek-h değerleri site_icerik.py ORNEK_H ile AYNI (sizes oradan hesaplanıyor). */
.ornek-duvar{--ornek-h:340px}
@media (max-width:600px){.ornek-duvar{--ornek-h:280px}}
@media (max-width:420px){.ornek-duvar{--ornek-h:250px}}
.ornek-satir{align-items:flex-start}
.ornek-satir figure,.ornek-duvar .ornek-satir figure{display:flex;flex-direction:column;overflow:hidden;width:auto;min-width:0}
.ornek-satir figure img{flex:0 0 auto;display:block;height:var(--ornek-h);width:auto;max-width:none;
  object-fit:contain;background:var(--yuzey)}
.ornek-satir figure figcaption{flex:0 0 auto;margin-top:0;width:0;min-width:100%;box-sizing:border-box}
.ornek-satir figcaption b,.ornek-satir figcaption span{display:block;min-height:1.35em;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ornek-satir .ornek-video,.ornek-duvar .ornek-satir .ornek-video{width:calc(var(--ornek-h) * 9 / 16)}
.ornek-satir .ornek-video video{height:var(--ornek-h);width:100%;aspect-ratio:auto}
.ornek-satir .ornek-yazi b,.ornek-satir .ornek-yazi span{display:block;min-height:1.35em;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 21.09 DENETİMİNDEN ÇIKAN DÜZELTME ----------
   Video rozetindeki yazı AÇIK TEMADA okunmuyordu. Sebep ölçüldü:
   `kp.css:1199` içindeki `strong,b{color:var(--metin)}` kuralı,
   rozetin `color:#fff` değerini `b` üzerinden eziyor. Rozetin balonu
   zaten koyu (`rgba(10,13,20,.66)`), yazı da koyuya dönünce ölçülen
   kontrast 1,1'e düşüyordu — yani yazı hiç görünmüyordu. Koyu temada
   sorun yoktu, çünkü orada `--metin` zaten açık renk. */
[data-hover] .ses-rozet b,
.telefon-cerceve .ses-rozet b,
.sahne-video .ses-rozet b,
.film-cerceve .ses-rozet b,
.sahne-video .ad b{color:inherit}

/* KOYU TEMADA ANA DÜĞMENİN YAZISI OKUNMUYORDU (21.09 ölçümü).
   `.dugme.ana` zeminini bu katmanda marka degradesine çeviriyor ama
   yazı rengini `kp.css`ten gelen `--vurgu-uzeri`de bırakıyordu; o
   değişken koyu temada #0B1226'ya (neredeyse siyah) dönüyor. Sonuç:
   koyu mavi degradenin üstünde siyaha yakın yazı, ölçülen kontrast
   1,78. Aynı degradeyi kullanan diğer bütün kurallar (kart-oku,
   plan-rozet, yorum-avatar, adım numaraları) zaten `color:#fff`
   yazıyor; eksik olan tek kural buydu. */
.dugme.ana,
.dugme.ana:hover,
.dugme.ana:focus{color:#fff}
/* Beyaz zeminli kapanış bandındaki düğme hariç: orada yazı mavi. */
.kapanis-bant .dugme.ana,
.kapanis-bant .dugme.ana:hover{color:#1A45BE}

/* ---------- PERFORMANS (23.09 — Enes: "başka bilgisayardan girdim,
   site çok ağır, hareketler çok ağır") ----------
   Video rozetleri oynayan ve kayan videonun ÜSTÜNDE duruyor; cam
   bulanıklığı her karede videonun altını yeniden bulanıklaştırıyordu.
   Zemin zaten koyu balon; bulanıklık yerine biraz daha koyu zemin. */
.sahne-video .ad,
.sahne-video .ses-rozet,
[data-hover] .ses-rozet,
.telefon-cerceve .ses-rozet{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,13,20,.74)}

/* HAFİF KİP — kp-clara.js zayıf makinede html'e `kp-hafif` koyuyor.
   Bütün cam bulanıklıkları kalkıyor; cam zeminler zaten %88-90 opak
   (--cam), görünüm neredeyse aynı kalıyor. Şeffaf kalan iki yüzey
   (kaydırınca daralan üst çubuk, kahraman formu) opak cam zemine geçiyor. */
html.kp-hafif *,
html.kp-hafif *::before,
html.kp-hafif *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* !important: koyu temanın :root[data-theme=dark] header.ust.kapsul.kompakt
   kuralı (0,5,1) daha özgül; ezilirse koyu temada şeffaf çubuk bulanıksız kalır. */
html.kp-hafif .canli-kart{background:var(--cam)!important}
/* Üst çubuk tam opak: bulanıklık yokken %90 cam zeminin arkasından
   kayan başlık hayalet gibi okunuyordu (23.09 ekran ölçümü). */
html.kp-hafif header.ust.kapsul,
html.kp-hafif header.ust.kapsul.kompakt,
html.kp-hafif #gezinmeKat.gezinme-kat{background:var(--yuzey)!important}

/* KP-FIYAT-HIZA-BAS: fiyat/indirim, açıklama ve eylemler eşit satırlarda. */
.planlar.esit .plan .kime{min-height:46px}
.planlar.esit .plan .fiyat{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:44px 28px;column-gap:9px;row-gap:4px;min-height:76px;align-items:baseline;flex-shrink:0}
.planlar.esit .fiyat .tutar{grid-column:1;grid-row:1;white-space:nowrap}
.planlar.esit .fiyat .birim{grid-column:2;grid-row:1;white-space:nowrap}
.planlar.esit .fiyat .eski{grid-column:1;grid-row:2;align-self:center;white-space:nowrap}
.planlar.esit .fiyat .indirim{grid-column:2;grid-row:2;align-self:center;justify-self:start;white-space:nowrap}
.planlar.esit .plan .fiyat-alt{min-height:44px;margin:0 0 14px}
.planlar.esit .plan .eylemler{min-height:48px;margin-top:4px;align-items:flex-start}
.planlar.esit .plan .eylemler .dugme{min-height:48px}
.planlar.esit .plan .plan-ara{min-height:36px;margin-top:18px}
/* KP-FIYAT-HIZA-SON */

/* PC ve APK ile ortak paket kartları; fiyat ve ödeme alanları korunur. */
.planlar.paket-uyum .paket-kredi {
  display:flex; align-items:center; gap:10px; min-height:76px;
  padding:12px 14px; margin:0 0 14px; border-radius:12px;
  border:1px solid color-mix(in srgb,var(--vurgu) 20%,transparent);
  background:color-mix(in srgb,var(--vurgu) 6%,var(--yuzey));
  font-size:14px; line-height:1.5; color:var(--metin);
}
.planlar.paket-uyum .paket-kredi img {width:32px; height:32px; flex:0 0 32px}
.planlar.paket-uyum .paket-kredi b {font-weight:700}
.planlar.esit.paket-uyum .plan .paket-ozellikler {margin:0; gap:0; flex:0 0 auto}
.planlar.paket-uyum .paket-ozellikler li {
  align-items:center; gap:10px; padding:6px 0; min-height:40px;
  font-size:14px; line-height:1.5; color:var(--metin);
}
.planlar.paket-uyum .paket-ozellikler li:nth-child(3) {min-height:60px}
.planlar.paket-uyum .paket-ozellikler li::before {display:none}
.planlar.paket-uyum .paket-ozellikler img,
.planlar.paket-uyum .paket-ucretsiz img {width:26px; height:26px; flex:0 0 26px}
.planlar.paket-uyum .paket-ucretsiz {
  margin-top:18px; padding:14px 14px 12px; border-radius:12px;
  border:1px solid color-mix(in srgb,var(--olumlu) 28%,transparent);
  background:color-mix(in srgb,var(--olumlu) 7%,var(--yuzey));
}
.planlar.paket-uyum .paket-ucretsiz h4 {
  margin:0 0 8px; font-size:12px; font-weight:700;
  color:var(--olumlu); letter-spacing:.04em;
}
.planlar.paket-uyum .paket-ucretsiz ul {list-style:none; padding:0; margin:0}
.planlar.paket-uyum .paket-ucretsiz li {
  display:flex; align-items:center; gap:9px; min-height:36px;
  font-size:13px; font-weight:600; color:var(--metin);
}
.planlar.paket-uyum .plan .kota-not {border-top:0; margin:12px 0 0; padding:0}
.planlar.esit.paket-uyum .plan .eylemler {margin-top:auto; padding-top:20px}
.planlar.paket-uyum .plan.ucretsiz .eylemler .dugme {width:100%}
.planlar.paket-uyum .plan .eylemler .havale-dugme {color:var(--metin)}

/* --- SHOPIER VE HAVALE ODEME DUGMELERI + GUVEN SERIDI (16.10.2026) --- */
.plan .eylemler.odeme-dugmeler {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 8px;
}
.plan .eylemler.odeme-dugmeler .dugme {
  width: 100%;
  padding-inline: 10px;
  font-size: 13.5px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.plan .eylemler.odeme-dugmeler .dugme svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.plan .eylemler.odeme-dugmeler .dugme.shopier-dugme {
  background: linear-gradient(135deg, #2153E0 0%, #3764EB 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(33, 83, 224, 0.45);
}
.plan .eylemler.odeme-dugmeler .dugme.shopier-dugme:hover {
  background: linear-gradient(135deg, #1B46C2 0%, #2153E0 100%);
}
.plan .eylemler.odeme-dugmeler .dugme.havale-dugme {
  background: rgba(255, 255, 255, 0.85);
  color: var(--murekkep);
  border: 1px solid rgba(15, 23, 42, 0.14);
}
[data-theme="dark"] .plan .eylemler.odeme-dugmeler .dugme.havale-dugme {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
@media (max-width: 420px) {
  .plan .eylemler.odeme-dugmeler {
    grid-template-columns: 1fr;
  }
}

.shopier-guven-serit {
  margin-top: 22px;
  padding: 24px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(33, 83, 224, 0.14);
  box-shadow: 0 10px 28px -12px rgba(14, 22, 38, 0.07);
}
.shopier-guven-ust {
  display: flex;
  align-items: center;
  gap: 18px;
}
.shopier-logo-kutu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  min-height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(108, 60, 233, 0.18);
  flex-shrink: 0;
}
.shopier-logo-kutu img { display: block; height: 24px; width: auto; }
.shopier-guven-metin { flex: 1; min-width: 0; }
.shopier-guven-metin b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--murekkep);
  margin-bottom: 4px;
}
.shopier-guven-metin span,
.shopier-odeme-yontemi div > span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--murekkep-2);
}
.shopier-paket-baglanti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(33, 83, 224, 0.2);
  color: var(--vurgu);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.shopier-paket-baglanti svg { width: 17px; height: 17px; }
.shopier-paket-baglanti:hover { background: rgba(33, 83, 224, 0.06); }
.shopier-paket-baglanti:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; }
.shopier-odeme-yontemleri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(33, 83, 224, 0.1);
  gap: 20px;
}
.shopier-odeme-yontemi { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.shopier-odeme-yontemi + .shopier-odeme-yontemi {
  border-left: 1px solid rgba(33, 83, 224, 0.1);
  padding-left: 24px;
}
.shopier-yontem-simge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(33, 83, 224, 0.06);
  color: var(--vurgu);
}
.shopier-yontem-simge svg { width: 21px; height: 21px; }
.shopier-odeme-yontemi b {
  display: block;
  color: var(--murekkep);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 3px;
}
[data-theme="dark"] .shopier-guven-serit { background: rgba(22, 27, 38, 0.82); border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .shopier-odeme-yontemleri,
[data-theme="dark"] .shopier-odeme-yontemi + .shopier-odeme-yontemi { border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .shopier-yontem-simge { background: rgba(100, 143, 255, 0.12); }
[data-theme="dark"] .shopier-paket-baglanti { border-color: rgba(100, 143, 255, 0.35); }
@media (max-width: 760px) {
  .shopier-guven-serit { padding: 20px; }
  .shopier-guven-ust { display: grid; grid-template-columns: 1fr auto; gap: 17px 10px; }
  .shopier-logo-kutu { width: 106px; min-height: 44px; }
  .shopier-guven-metin { grid-column: 1 / -1; grid-row: 2; }
  .shopier-paket-baglanti { grid-column: 2; grid-row: 1; padding-inline: 10px; font-size: 12px; }
  .shopier-guven-metin b { font-size: 16px; }
  .shopier-odeme-yontemleri { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; padding-top: 20px; }
  .shopier-odeme-yontemi + .shopier-odeme-yontemi { border-left: 0; padding-left: 0; }
}

/* ---- Telefon uygulaması ön kayıt şeridi (26.10.2026): ana sayfa kahramanı + indir ---- */
.onkayit-satir{display:flex;justify-content:center;margin:18px auto 0;max-width:640px}
.onkayit-serit{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border-radius:16px;
  border:1px solid var(--cizgi);background:var(--yuzey);color:var(--metin);text-decoration:none;text-align:left;
  box-shadow:0 6px 22px rgba(20,24,33,.06);transition:border-color .2s,transform .2s}
.onkayit-serit:hover{border-color:var(--vurgu);transform:translateY(-1px)}
.onkayit-serit .onkayit-simge{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:14px;background:linear-gradient(135deg,#34A853 0%,#1E8E3E 45%,#1A73E8 100%);color:#fff;box-shadow:0 6px 16px rgba(30,142,62,.28)}.onkayit-serit .onkayit-simge svg{width:26px;height:26px}.onkayit-rozet{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700;vertical-align:2px;color:#137333;background:#E6F4EA;border:1px solid #CEEAD6;white-space:nowrap}
.onkayit-serit > span:not(.onkayit-simge){display:grid;gap:2px;flex:1 1 auto;min-width:0}
.onkayit-serit b{font-size:15.5px}
.onkayit-serit .ince{font-size:13.5px;color:var(--metin-2);line-height:1.4}
.onkayit-serit svg.ok{width:20px;height:20px;flex:0 0 auto;color:var(--vurgu)}