/* =========================================================
   Farlab — far beyazlatma sitesi
   Renkler videodan piksel örneklemesiyle çıkarıldı.
   ========================================================= */

:root{
  --mavi:        #14508f;   /* birincil mavi (butonlar, CTA)   */
  --mavi-koyu:   #113f70;   /* hover                            */
  --lacivert:    #1a4b84;   /* mavi başlıklar                   */
  --krem:        #f5e9d6;   /* hero arka planı                  */
  --krem-2:      #efe6d6;
  --bg:          #ffffff;
  --gri-bg:      #f4f4f4;   /* açık gri bölüm arka planı        */
  --gri-acik:    #fafafa;
  --gri-kart:    #ededed;   /* ürün kartı zemini                */
  --koyu:        #191b1f;   /* alt bilgi                        */
  --metin:       #2b2e33;
  --soluk:       #6b7280;
  --altin:       #e8b33c;   /* yıldızlar                        */
  --wa:          #25d366;
  --cizgi:       #e3e3e3;
  --kap:         1200px;    /* içerik genişliği                 */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color:var(--metin);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.18; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.kap{ width:100%; max-width:var(--kap); margin:0 auto; padding:0 24px; }

/* ÜST BÖLGE TAM GENİŞLİK (Arda 2026-09-01: "ortaya çok yakın olmuş").
   1200px'lik kutu 1920 ekranda solda 377px, sağda 392px boşluk bırakıyordu;
   logo, üstteki yazılar ve iki çizgili menü düğmesi ortaya toplanmış
   görünüyordu. Üst bar ve hero artık ekranın kenarlarına yaslanıyor —
   ikisi de AYNI yan boşluğu kullandığı için logo ile başlık aynı hizada. */
.ust .kap,
.hero .kap{ max-width:none; padding:0 clamp(24px, 3.4vw, 60px); }

/* ---------- butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14.5px; font-weight:600; letter-spacing:.1px;
  padding:13px 26px; border-radius:4px; border:0; cursor:pointer;
  font-family:inherit;
}
.btn-mavi{ background:var(--mavi); color:#fff; }
.btn-mavi:hover{ background:var(--mavi-koyu); }
.btn-buyuk{ padding:16px 34px; font-size:15.5px; }

.alt-cizgi{
  display:block; width:64px; height:3px; background:var(--mavi);
  border-radius:2px; margin:20px 0 26px;
}
.alt-cizgi.orta{ margin:18px auto 20px; }

.orta-baslik{ text-align:center; font-size:34px; font-weight:600; letter-spacing:-.2px; }
.orta-alt{ text-align:center; color:var(--soluk); font-size:15px; line-height:1.85; max-width:640px; margin:0 auto; }
.orta-alt.dar{ max-width:520px; margin-top:14px; }
.orta-btn{ text-align:center; margin-top:52px; }

/* =========================================================
   ÜST BAR
   ========================================================= */
.ust{
  position:sticky; top:0; z-index:60;
  background:#fdfdfd;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.ust.kucuk{ box-shadow:0 2px 14px rgba(0,0,0,.07); }

.ust-ic{ display:flex; align-items:center; gap:26px; height:88px; }
.ust.kucuk .ust-ic{ height:62px; }

.logo{
  font-size:29px; font-weight:700; color:var(--mavi);
  letter-spacing:-.6px; flex:0 0 auto;
}
.ust.kucuk .logo{ font-size:25px; }

.ok{
  width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.65; margin-top:2px;
}

.ust-sag{ display:flex; align-items:center; gap:14px; flex:0 0 auto; margin-left:auto; }

.simge-btn{
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:#3f434a; padding:0;
}
.simge-btn svg{ width:21px; height:21px; }
.sepet{ position:relative; }
.rozet{
  position:absolute; top:-1px; right:-2px;
  min-width:16px; height:16px; padding:0 4px;
  background:#e2342c; color:#fff; font-size:10px; font-weight:600;
  border-radius:9px; display:grid; place-items:center; line-height:1;
}

.secici{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#54585e; font-weight:500;
  border:1px solid #d8d8d8; border-radius:4px; padding:8px 12px;
  cursor:pointer; user-select:none;
}
.btn-ust{ padding:11px 20px; font-size:13.5px; }


/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  /* videodaki hero zemininden ölçülen 8 nokta (x=10..820, y=110) ile kuruldu:
     solda krem -> sağda gri; hero görselinin zemini bu griyle aynı, ek olsun diye */
  background:linear-gradient(to right,
    #f6ead6 0%, #f7ebd7 14%, #f1e8db 29%, #e4dfd8 45%,
    #ddddda 59%, #d2d2d2 73%, #d9d9d9 85%, #d8d8d8 100%);
}
/* ---------- KAPAK VİDEOSU ----------
   Kapak şeridinin tamamını kaplıyor. Oran ekranla değiştiği için (1920'de
   3,40:1, 1440'ta 2,55:1, 900'de 1,20:1) tek bir videonun "tam oturması"nın
   tek yolu object-fit:cover — video kutuyu daima doldurur, taşan kenar
   kırpılır, hiçbir genişlikte boşluk kalmaz. */
.kapak-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none;
  /* POSTER: <video poster=""> yerine arka plan. Nitelik olsaydı tarayıcı
     ekran ne olursa olsun 16:9 posteri indirirdi; burada medya sorgusu
     hangisini seçerse yalnız o iniyor. Konum object-position ile AYNI
     olmalı, yoksa video gelince kadraj zıplar. */
  background:#e9e3d9 url("gorseller/kapak-video-poster.webp") center center / cover no-repeat;
}
.hero-fon{ position:absolute; inset:0; pointer-events:none; }

.blob{ position:absolute; border-radius:34px; opacity:.55; }
.b1{ width:120px; height:150px; left:4%; top:12%; background:#dfe4ea; transform:rotate(-16deg); }
.b2{ width:70px; height:70px; left:44%; top:24%; background:#e6e2da; border-radius:24px; transform:rotate(12deg); }

/* arkadaki dikey çizgi paneli */
.serit{
  position:absolute; right:10%; top:4%; width:250px; height:56%;
  border-radius:150px 150px 0 0;
  background:repeating-linear-gradient(90deg, #cfcfcf 0 4px, transparent 4px 15px);
  opacity:.85;
}
/* beyaz kavis */
.kavis{
  position:absolute; right:6%; top:-6%; width:420px; height:104%;
  border-radius:230px 230px 0 0;
  background:radial-gradient(120% 90% at 30% 20%, #ffffff 0%, #f6f4f0 55%, rgba(246,244,240,0) 78%);
}

.hero-ic{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; align-items:center;
  gap:60px; min-height:560px; padding-top:20px; padding-bottom:70px;
}
.hero-yazi{ max-width:820px; }   /* video artık arkada; satır uzunluğu dağılmasın */

.hero-yazi h1{
  /* Geniş ekranda hero da genişlediği için başlık onunla birlikte büyüyor. */
  font-size:clamp(44px, 4.4vw, 76px); font-weight:700; letter-spacing:-1.2px;
  color:#2b2b2b; margin-bottom:38px;
}

.hero-gorsel{ position:relative; display:grid; place-items:center; }
.gizli{ display:none; }
/* Hero görseli videodan geliyor; podyum, şerit panel ve kavis GÖRSELİN İÇİNDE.
   Bu yüzden .serit / .kavis / .podyum gizli — ikinci kez çizilmesin. */
.far-foto{
  position:relative; z-index:2;
  /* width/height öznitelikleri yerleşim kaymasını önlemek için duruyor;
     height:auto olmazsa tarayıcı 778px'i olduğu gibi uygular ve görsel gerilir. */
  display:block;                    /* artık <video>; satır-içi boşluk oluşmasın */
  width:100%; height:auto; max-width:760px;
  margin-left:auto;                 /* sağa yaslı — başlıkla çakışmasın */
  /* dikdörtgen kenar belli olmasın diye kenarları eritilmiş maske */
  -webkit-mask-image:radial-gradient(88% 86% at 50% 48%, #000 72%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(88% 86% at 50% 48%, #000 72%, rgba(0,0,0,0) 100%);
}
.serit, .kavis, .podyum{ display:none; }
.far-cizim{ width:100%; max-width:520px; filter:drop-shadow(0 26px 34px rgba(30,40,55,.22)); position:relative; z-index:2; }
/* fotoğrafın oturduğu yumuşak zemin gölgesi + ince altın hat */
.podyum{
  position:absolute; z-index:1; bottom:14px; left:56%; transform:translateX(-50%);
  width:46%; height:52px; border-radius:50%;
  background:radial-gradient(60% 70% at 50% 40%, rgba(120,105,80,.20) 0%, rgba(120,105,80,0) 72%);
}
.podyum::before{
  content:""; position:absolute; left:6%; right:6%; top:44%; height:36px;
  border-radius:50%; border:1.5px solid rgba(190,155,88,.42);
  border-top-color:transparent;
}

.noktalar{
  position:absolute; z-index:3; bottom:30px; left:0; right:0;
  display:flex; justify-content:center; gap:12px;
}
.nokta{ width:9px; height:9px; border-radius:50%; background:#c9c9c9; }
.nokta.aktif{ background:var(--mavi); }

/* =========================================================
   ÜRÜN / NEDEN
   ========================================================= */
.urun{ position:relative; overflow:hidden; background:var(--gri-acik); padding:96px 0; }
.desen-nokta{
  position:absolute; right:6%; top:70px; width:76px; height:76px;
  background-image:radial-gradient(#c9d6e6 1.8px, transparent 1.9px);
  background-size:19px 19px; opacity:.8;
}
.urun-blob{
  position:absolute; left:-90px; bottom:40px; width:300px; height:260px;
  background:#dfe7f0; opacity:.5; border-radius:0 200px 200px 0;
}

.urun-ic{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }

.urun-kart{
  background:var(--gri-kart); border-radius:14px;
  aspect-ratio:1/1; display:grid; place-items:center; padding:16px;
}
/* Ürün videosu kartı tamamen dolduruyor; 16:9 kaynak kare kartta object-fit
   ile kırpılıyor, şişe zaten karenin ortasında duruyor. */
/* <picture> yalnızca doğru kaynağı SEÇMEK için var; kendi kutusu yerleşimi
   bozmasın diye ortadan kalkıyor, <img> doğrudan yerleşimin çocuğu oluyor. */
.hero-gorsel picture,
.ks-kart picture,
.foto-tek picture{ display:contents; }

.sise-video{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:8px; background:var(--gri-kart);
}

.urun-yazi h2{ font-size:41px; font-weight:600; color:var(--lacivert); letter-spacing:-.6px; }

.rozet-satir{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.rozet-simge{ width:38px; height:38px; display:grid; place-items:center; color:var(--mavi); flex:0 0 auto; }
.rozet-simge svg{ width:30px; height:30px; }
.rozet-yazi{ display:flex; flex-direction:column; gap:2px; }
.rozet-yazi small{ font-size:10px; letter-spacing:1.2px; color:#9aa1aa; font-weight:500; }
.rozet-yazi b{ font-size:14.5px; font-weight:600; color:var(--lacivert); }

.urun-yazi p{ color:var(--soluk); font-size:15px; line-height:1.95; margin-bottom:30px; max-width:520px; }

/* =========================================================
   ÖNCESİ / SONRASI
   ========================================================= */
.karsilastir{ background:#f7f7f7; padding:92px 0 100px; }
.karsilastir .orta-alt{ margin-bottom:46px; }

.ks-izgara{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ks-kart{
  position:relative; margin:0; border-radius:12px; overflow:hidden;
  aspect-ratio:1.42/1;               /* videodaki kart oranı (412x290) */
  background:#1a1a1a;
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.ks-kart img{ width:100%; height:100%; object-fit:cover; }

.ks-etiket{
  position:absolute; top:14px; left:14px;
  background:rgba(18,20,24,.62); color:#fff;
  font-size:12.5px; font-weight:600; letter-spacing:.6px;
  padding:7px 14px; border-radius:6px; backdrop-filter:blur(3px);
}
.ks-etki{
  position:absolute; right:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(18,20,24,.62); color:#fff;
  font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:6px; backdrop-filter:blur(3px);
}
.ks-etki svg{ width:15px; height:15px; }

.vs{
  position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--mavi); color:#fff;
  display:grid; place-items:center;
  font-size:14px; font-weight:700; letter-spacing:.5px;
  box-shadow:0 6px 16px rgba(20,80,143,.4);
  border:3px solid #f7f7f7;
}

/* =========================================================
   UYGULAMA ADIMLARI
   ========================================================= */
.uygulama{
  position:relative; background:#fcfcfc; padding:92px 0 100px;
  background-image:radial-gradient(80% 60% at 20% 10%, rgba(224,231,238,.5) 0%, rgba(255,255,255,0) 60%),
                   radial-gradient(70% 60% at 85% 80%, rgba(228,232,236,.45) 0%, rgba(255,255,255,0) 60%);
}
.adim-izgara{
  display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
  margin-top:56px;
}
.adim{ text-align:center; }
.adim-daire{
  width:104px; height:104px; margin:0 auto 26px;
  border-radius:50%; background:#f0f0f0;
  display:grid; place-items:center; color:var(--lacivert);
}
.adim-daire svg{ width:66px; height:66px; }
.adim h3{ font-size:16.5px; font-weight:600; margin-bottom:12px; }
.adim p{ color:var(--soluk); font-size:14px; line-height:1.85; max-width:280px; margin:0 auto; }

/* =========================================================
   YORUMLAR
   ========================================================= */
.yorumlar{ background:var(--gri-bg); padding:88px 0 96px; }
.yorum-sarma{ position:relative; margin-top:46px; padding:0 46px; }

.yorum-izgara{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:center; }

.yorum{
  background:#fff; border-radius:10px; padding:24px 22px 22px;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}
.yorum.one{ padding:34px 24px 30px; box-shadow:0 14px 34px rgba(0,0,0,.1); }

.yorum-simge{ display:block; width:34px; height:34px; color:var(--lacivert); margin-bottom:12px; }
.yorum-simge svg{ width:34px; height:34px; }

.yorum-ust{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.yorum-ust small{ font-size:11.5px; color:#9aa1aa; }
.yildiz{ color:var(--altin); font-size:13px; letter-spacing:1.5px; }

.yorum p{ color:var(--soluk); font-size:13.5px; line-height:1.9; margin-bottom:18px; }
.yorum-alt{ display:flex; align-items:center; gap:10px; }
.yorum-alt b{ font-size:12.5px; font-weight:600; color:var(--metin); }

.ok-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:0; cursor:pointer; color:#5b616a;
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
}
.ok-btn svg{ width:18px; height:18px; }
.ok-btn.sol{ left:0; }
.ok-btn.sag{ right:0; }
.ok-btn:hover{ color:var(--mavi); }

.cizgi-noktalar{ display:flex; justify-content:center; gap:8px; margin-top:30px; }
.cn{ width:22px; height:3px; border-radius:2px; background:#cfcfcf; }
.cn.aktif{ background:var(--mavi); }

/* =========================================================
   ALT BİLGİ
   ========================================================= */
/* Alt bilgi EN AZ bir ekran boyunda: yoksa sayfanın sonuna geldiğimizde
   #iletisim ekranın üstüne oturamıyor (kaydırma bitiyor) ve "Randevu"
   bağlantıları insanı yorumların ortasına bırakıyordu. */
.alt{
  background:var(--koyu); color:#c7cad0; padding-top:64px;
  min-height:calc(100vh - 60px);
  display:flex; flex-direction:column;
}
.alt-ic{
  display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:60px;
  padding-bottom:56px;
  flex:1 1 auto; align-content:center;   /* boy uzayınca sütunlar ortada dursun */
}
.alt-sutun h4{ color:#fff; font-size:16px; font-weight:600; margin-bottom:22px; }
.alt-sutun p{ font-size:13.5px; line-height:1.9; color:#a2a7ae; max-width:330px; }

.sosyal{ display:flex; gap:12px; margin-top:26px; }
.sosyal a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid #3a3d43; display:grid; place-items:center; color:#c7cad0;
}
.sosyal svg{ width:16px; height:16px; }
.sosyal a:hover{ background:var(--mavi); border-color:var(--mavi); color:#fff; }

.alt-liste li{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:13.5px; color:#a2a7ae; }
.alt-liste svg{ width:18px; height:18px; flex:0 0 auto; }
.alt-liste a:hover{ color:#fff; }

.alt-form input{
  width:100%; background:#232629; border:1px solid #33363b; border-radius:4px;
  padding:13px 14px; color:#e7e9ec; font-size:13.5px; font-family:inherit;
  margin-bottom:12px;
}
.alt-form input::placeholder{ color:#7c8188; }
.alt-form input:focus,
.alt-form select:focus{ outline:none; border-color:var(--mavi); }

/* ---------- ANİMASYONLU HİZMET SEÇİMİ ----------
   Yerleşik <select> tarayıcının kendi menüsünü açıyor: biçimlendirilemiyor,
   hiçbir geçişi yok. Bu yüzden kendi kutumuz yazıldı; değer gizli input'ta. */
.secim{ position:relative; margin-bottom:12px; }

.secim-dugme{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#232629; border:1px solid #33363b; border-radius:4px;
  padding:13px 14px; color:#7c8188; font-size:13.5px; font-family:inherit;
  text-align:left; cursor:pointer;
  transition:border-color .25s ease, background-color .25s ease, color .25s ease;
}
.secim-dugme:hover{ border-color:#474b52; background:#262a2e; }
.secim.acik .secim-dugme,
.secim-dugme:focus-visible{ outline:none; border-color:var(--mavi); }
.secim.dolu .secim-dugme{ color:#e7e9ec; }

/* ok: açılınca 180° dönüyor */
.secim-ok{
  width:10px; height:10px; flex:0 0 auto; margin-right:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.secim.acik .secim-ok{ transform:translateY(2px) rotate(-135deg); }

/* liste: yukarıdan aşağı açılıyor */
.secim-liste{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  margin:0; padding:6px; list-style:none;
  background:#1e2124; border:1px solid #33363b; border-radius:6px;
  box-shadow:0 18px 34px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-8px) scaleY(.96);
  transform-origin:top center;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s .28s;
}
.secim.acik .secim-liste{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
}

/* satırlar sırayla süzülüyor (hizmet listesindeki ritmin aynısı) */
.secim-liste li{
  padding:10px 12px; border-radius:4px; color:#c9ced4; font-size:13.5px; cursor:pointer;
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1),
             background-color .2s ease, color .2s ease;
}
.secim.acik .secim-liste li{ opacity:1; transform:none; }
.secim.acik .secim-liste li:nth-child(1){ transition-delay:.02s,.02s,0s,0s; }
.secim.acik .secim-liste li:nth-child(2){ transition-delay:.06s,.06s,0s,0s; }
.secim.acik .secim-liste li:nth-child(3){ transition-delay:.10s,.10s,0s,0s; }
.secim.acik .secim-liste li:nth-child(4){ transition-delay:.14s,.14s,0s,0s; }
.secim.acik .secim-liste li:nth-child(5){ transition-delay:.18s,.18s,0s,0s; }
.secim-liste li:hover,
.secim-liste li.vurgulu{ background:#2b3036; color:#fff; }
.secim-liste li.secili{ color:var(--mavi); }

@media (prefers-reduced-motion: reduce){
  .secim-liste, .secim-liste li, .secim-ok{ transition-duration:.01s; }
}

.form-satir{ display:flex; gap:12px; align-items:flex-start; }
.form-satir input{ flex:1; }
.form-satir .btn{ padding:13px 22px; font-size:13.5px; }
.form-not{ display:block; font-size:11.5px; color:#7c8188; margin-top:4px; }

/* ---------- İLETİŞİM SATIRLARI ----------
   Satırlar görünüme girince sırayla süzülüyor (JS tetikliyor), üzerine
   gelince ikon ve yazı hafifçe kayıyor — hizmet listesindeki ritmin aynısı. */
.alt-liste li{
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.alt-liste li a{ transition:color .25s ease, transform .35s cubic-bezier(.22,1,.36,1); display:inline-block; }
.alt-liste li svg{ transition:transform .35s cubic-bezier(.22,1,.36,1), color .25s ease; }
.alt-liste li:hover{ transform:translateX(4px); }
.alt-liste li:hover svg{ transform:scale(1.12); color:var(--mavi); }
.alt-liste li:hover a{ color:#fff; }
/* giriş: JS 'gorundu' sınıfını takınca yerine oturuyor */
.alt-liste.suzul li{ opacity:0; transform:translateY(14px); }
.alt-liste.suzul.gorundu li{ opacity:1; transform:none; }
.alt-liste.suzul.gorundu li:nth-child(1){ transition-delay:.00s; }
.alt-liste.suzul.gorundu li:nth-child(2){ transition-delay:.08s; }
.alt-liste.suzul.gorundu li:nth-child(3){ transition-delay:.16s; }
.alt-liste.suzul.gorundu li:nth-child(4){ transition-delay:.24s; }
.alt-liste.suzul.gorundu li:nth-child(5){ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .alt-liste.suzul li{ opacity:1; transform:none; transition:none; }
}

.telif{
  border-top:1px solid #2a2d32; text-align:center;
  padding:20px 24px; font-size:12.5px; color:#8a8f96;
}

/* =========================================================
   WHATSAPP
   ========================================================= */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:var(--wa); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(37,211,102,.42);
}
.wa svg{ width:30px; height:30px; }

/* =========================================================
   DUYARLI
   ========================================================= */
@media (max-width:1080px){
  .btn-ust{ padding:10px 15px; }
  .hero-yazi h1{ font-size:48px; }
}

@media (max-width:900px){
  .ust-ic{ position:relative; }
  .secici, .simge-btn:not(.sepet){ display:none; }

  /* TELEFONDA VİDEO KIRPILMIYOR — kendi 16:9 oranında, tam genişlikte bir
     ŞERİT olarak akışta duruyor; yazı onun ALTINDA, kapağın kendi zemininde.
     Neden böyle: 16:9 bir kareyi dikey bir kutuya object-fit:cover ile
     oturtmak enin %57'sini kesiyor — ölçüldü, 1920'lik kareden yalnız 832 px
     görünüyordu ve araç x=800'den sağa uzandığı için ekranda ancak ucu
     kalıyordu. Aracın tamamı o dikey orana TAM YÜKSEKLİKTE sığmıyor
     (1556 px gerekirdi, kaynak 1080). Üstünü altını uydurma zeminle
     doldurmak DENENDİ ve istenmedi (Arda: 'üstte altta bozulma veya blur
     olmayacak, sadece video'). Şerit olarak karenin TAMAMI görünüyor:
     kırpma yok, uydurma piksel yok. Kaynak da ayrı: kapak-video-mobil.mp4
     (1152x648, 360 KB) — 390 px'lik şerit 3x ekranda 1170 px eder. */
  /* YAZI BÖLGESİNDE DEGRADE YOK (Arda: 'blur hiçbir şekilde istemiyorum').
     .hero'nun zemini videonun duvarından örneklenmiş yatay bir degrade
     (krem -> gri). Masaüstünde video zemini tamamen kapattığı için hiç
     görünmüyor; telefonda video şerit olunca yazının arkasında açığa
     çıktı ve odaksız bir fotoğraf gibi duruyordu. Telefonda DÜZ RENK:
     üstteki bar da beyaz, alttaki bölüm #fafafa — arada fark yok. */
  .hero{ background:#ffffff; }
  .kapak-video{
    position:relative; inset:auto;
    width:100%; height:auto; aspect-ratio:16/9;
    object-position:center center;
    background-image:url("gorseller/kapak-video-mobil-poster.webp");
    background-position:center center;
  }
  /* Seçici '.hero .hero-ic' olmak ZORUNDA: yukarıdaki
     '.hero .kap{ padding:0 clamp(...) }' iki sınıflı olduğu için üstünlük
     kazanıyor ve dikey dolguyu 0'a düşürüyor (ölçüldü: h1 üstü 0 px).
     min-height artık gereksiz — video akışta, yükseklik kendiliğinden. */
  .hero .hero-ic{ grid-template-columns:1fr; text-align:center; align-items:center;
            min-height:0; padding:38px 24px 64px; }
  /* backdrop-filter telefonda ayrı katman + geri okuma demek; bu iki
     küçük etikette görsel katkısı yok denecek kadar az, zemin biraz
     koyulaştırılıp bulanıklık kaldırıldı. */
  .ks-etiket, .ks-etki{ backdrop-filter:none; background:rgba(18,20,24,.74); }
  .hero-yazi{ max-width:none; }
  .hero-yazi h1{ font-size:40px; }
  .serit, .kavis, .blob{ opacity:.35; }
  .urun-ic{ grid-template-columns:1fr; gap:38px; }
  .urun-kart{ aspect-ratio:4/3; }
  .urun-yazi h2{ font-size:32px; }
  .adim-izgara{ grid-template-columns:1fr; gap:40px; }
  .yorum-izgara{ grid-template-columns:1fr; }
  .yorum.one{ padding:24px 22px 22px; }
  .alt-ic{ grid-template-columns:1fr; gap:40px; }
}

@media (max-width:620px){
  .orta-baslik{ font-size:26px; }
  .hero-yazi h1{ font-size:33px; }
  .ks-izgara{ grid-template-columns:1fr; gap:18px; }
  .vs{ display:none; }
  .yorum-sarma{ padding:0; }
  .ok-btn{ display:none; }
}

/* Fiyat satırı — süreç bölümündeki "Teklif" kartında duruyor. Şimdilik
   hidden; Arda başlangıç fiyatını verince index.html'de hidden kaldırılıp
   rakam yazılacak (uydurma fiyat yazılmadı). */
.fiyat-not{
  display:block; margin:-6px 0 16px; padding:9px 12px; border-radius:8px;
  background:rgba(0,0,0,.045); color:var(--metin);
  font-size:13px; font-weight:600; line-height:1.6;
}
/* display:block, hidden ÖZELLİĞİNİ EZİYOR — sınıf seçicisi tarayıcının
   kendi [hidden] kuralından güçlü. Gizli kalması için ayrıca yazılmalı. */
.fiyat-not[hidden]{ display:none; }

/* ============================================================
   TELEFONDA OKUNABİLİRLİK VE DOKUNMA (2026-09-12)

   Arda: "mobilden bakanlar için de güzel bir şekilde boyutlarını ayarla."

   ÖLÇÜLDÜ (arac/mobil-olcu.cjs, 375x812):
     small              10px        (İSTANBUL GENELİ ... satırı)
     small.form-not     11.5px
     a.logo             92x43
     a.btn.btn-mavi     109x40
     button.sepet       34x34
     button#menuBtn     42x42
     telefon bağlantısı 99x20 / 120x20
   Parmak ucu ~44px; 20-34px'lik hedefler ıskalanıyor.

   PC'YE DOKUNULMUYOR: kurallar 760px altında.
   ============================================================ */
@media (max-width:760px){
  small, .rozet-yazi small, div.yorum-ust small{font-size:12px; letter-spacing:.6px}
  .form-not{font-size:12.5px}

  /* Üst çubuk: üç hedef de 44px'e çıkıyor. */
  .logo{min-height:44px; display:inline-flex; align-items:center}
  .btn-mavi{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
  .simge-btn{min-width:44px; min-height:44px}
  .menu-dugme{min-width:44px; min-height:44px}

  /* Telefon numaraları: en çok basılan bağlantılar, en ince hedeflerdi. */
  /* SABIT WHATSAPP DUGMESI HARIC (.wa). Bu kural metin icindeki
     telefon/WhatsApp baglantilarini parmak olcusune cikariyor ama
     nitelik secicisinin oncelik agirligi .wa dan yuksek oldugu icin
     sag alttaki yuvarlak dugmeyi de inline-block yapiyordu:
     .wa display:grid yerine block oluyor, icindeki 30px SVG kutunun
     soluna yapisip merkezden 12px kayiyordu (olculdu, telefon 390px).
     Masaustunde sapma 0 idi, o yuzden yalniz telefonda gorunuyordu. */
  a[href^="tel:"]:not(.wa), a[href*="wa.me"]:not(.wa){display:inline-block; padding:12px 0; min-height:44px}

  /* Yan menu baglari 42px olculdu; menunun tamami parmakla
     kullaniliyor, 44'e cikiyor. */
  .baglar a{display:block; min-height:44px; display:flex; align-items:center}
}