/* ==================================================================
   HIZMET DETAY - UST DONUSUM BOLUMU
   ------------------------------------------------------------------
   NEDEN AYRI DOSYA:
   Sitenin Tailwind CSS'i derlenerek uretiliyor (npx tailwindcss ...).
   Bu bolumun renkleri PHP dizisinden hizmete gore degistigi icin
   Tailwind tarayicisi bu siniflari kaynakta goremez ve purge eder.
   O yuzden bolum, Tailwind build'inden tamamen bagimsiz, elle yazilmis
   CSS ile kuruldu. Hizmete ozel renk, HTML uzerinde --hz-r1 / --hz-r2
   / --hz-vurgu degiskenleriyle veriliyor.

   Tum secicilerin onunde hz- oneki var; sayfadaki mevcut Tailwind
   siniflariyla cakisma ihtimali yok.
================================================================== */

.hz-ust{
  --hz-r1:#132a4a;
  --hz-r2:#2563eb;
  --hz-vurgu:#93c5fd;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--hz-r1) 0%,var(--hz-r2) 100%);
  padding:3rem 0 3.25rem;
  color:#fff;
  isolation:isolate;
}

/* Arka plan dokusu: iki yumusak isik + ince nokta izgara.
   Hepsi CSS; ek gorsel istegi yok, LCP'yi etkilemez. */
.hz-ust::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(60rem 30rem at 85% -10%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(40rem 24rem at 5% 110%,rgba(0,0,0,.28),transparent 65%);
}
.hz-ust::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.5;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
}

.hz-kap{
  position:relative;
  max-width:80rem;
  margin:0 auto;
  padding:0 1rem;
}
@media (min-width:640px){ .hz-kap{ padding:0 1.5rem; } }
@media (min-width:1024px){ .hz-kap{ padding:0 2rem; } }

.hz-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.25rem;
  align-items:center;
}
@media (min-width:1024px){
  .hz-ust{ padding:3.25rem 0 3.5rem; }
  .hz-grid{ grid-template-columns:1.05fr .95fr; gap:3rem; }
}

/* ---------------- SOL SUTUN ---------------- */

/* Mobilde sira degistiriliyor: telefonda 4 fayda maddesi alt alta
   dizildigi icin CTA butonlari ~900px asagida kaliyordu. Flex order
   ile mobilde butonlar aciklamanin hemen altina alindi; masaustunde
   (iki sutun oldugunda) ozgun sira geri geliyor. */
.hz-sol{ display:flex; flex-direction:column; }
.hz-sol > .hz-iz{ order:1; }
.hz-sol > .hz-baslik{ order:2; }
.hz-sol > .hz-vaat{ order:3; }
.hz-sol > .hz-aciklama{ order:4; }
.hz-sol > .hz-cta{ order:5; }
.hz-sol > .hz-maddeler{ order:6; }
.hz-sol > .hz-kimler{ order:7; }
@media (min-width:1024px){
  .hz-sol > .hz-maddeler{ order:5; }
  .hz-sol > .hz-cta{ order:6; }
}

/* ---- Breadcrumb izi ----
   Eskiden ayri bir renkli bandin icindeydi; o bant kaldirilinca
   buraya tasindi. Ust bandin uzerinde durdugu icin acik renkli. */
.hz-iz{ font-size:.78rem; }
.hz-iz ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .45rem;
  margin:0;
  padding:0;
  list-style:none;
}
.hz-iz a{
  color:rgba(255,255,255,.65);
  text-decoration:none;
  transition:color .2s ease;
}
.hz-iz a:hover{ color:#fff; text-decoration:underline; }
.hz-iz li[aria-current]{ color:rgba(255,255,255,.92); font-weight:600; }
.hz-iz-ayrac{ color:rgba(255,255,255,.35); }

/* H1 - sayfanin tek H1'i. Breadcrumb bandi kaldirildigi icin
   baslik buraya tasindi. */
.hz-baslik{
  margin:.85rem 0 0;
  font-size:clamp(1.55rem,3.6vw,2.3rem);
  line-height:1.16;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}

/* Vaat cumlesi - H1'in altindaki tanitim satiri.
   Baslik degil, bu yuzden <p>. Gorsel olarak H1'den sonra geliyor
   ama yine de vurgulu: donusum mesajini o tasiyor. */
.hz-vaat{
  margin:.7rem 0 0;
  max-width:34rem;
  font-size:clamp(1.08rem,2.2vw,1.42rem);
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--hz-vurgu);
  text-wrap:balance;
}

.hz-aciklama{
  margin:.85rem 0 0;
  max-width:34rem;
  font-size:.975rem;
  line-height:1.72;
  color:rgba(255,255,255,.82);
}

/* Fayda maddeleri */
.hz-maddeler{
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
}
@media (min-width:640px){ .hz-maddeler{ grid-template-columns:1fr 1fr; } }

.hz-madde{
  display:flex;
  gap:.7rem;
  padding:.75rem .8rem;
  border-radius:.85rem;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.hz-madde:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-2px);
}
.hz-madde-ikon{
  flex:0 0 auto;
  width:1.85rem;
  height:1.85rem;
  border-radius:.55rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  color:var(--hz-vurgu);
  font-size:.78rem;
}
.hz-madde-baslik{
  margin:0;
  font-size:.85rem;
  font-weight:700;
  color:#fff;
  line-height:1.35;
}
.hz-madde-metin{
  margin:.2rem 0 0;
  font-size:.775rem;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}

/* CTA butonlari */
.hz-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.4rem;
}
.hz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.35rem;
  border-radius:.85rem;
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.hz-btn:hover{ transform:translateY(-2px); }
.hz-btn-birincil{
  background:#fff;
  color:var(--hz-r1);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
}
.hz-btn-birincil:hover{ box-shadow:0 16px 30px -10px rgba(0,0,0,.55); }
.hz-btn-ikincil{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
  color:#fff;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hz-btn-ikincil:hover{ background:rgba(255,255,255,.20); }
.hz-btn-wp{ background:#25d366; color:#fff; }
.hz-btn-wp:hover{ background:#1eb355; }

/* Kimler icin serisi */
.hz-kimler{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .6rem;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.hz-kimler-baslik{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(255,255,255,.55);
  margin-right:.2rem;
}
.hz-cip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .65rem;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-size:.75rem;
  color:rgba(255,255,255,.88);
}
.hz-cip i{ font-size:.62rem; color:var(--hz-vurgu); }

/* ---------------- SAG SUTUN: MOCKUP ---------------- */

.hz-gorsel{ position:relative; }

.hz-kart{
  position:relative;
  border-radius:1.1rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 55px -22px rgba(0,0,0,.65);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.8rem;
}
.hz-kart-ic{
  border-radius:.75rem;
  background:#fff;
  overflow:hidden;
  color:#1f2937;
}

/* -- Ortak: pencere ust cubugu -- */
.hz-cubuk{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .7rem;
  background:#f1f5f9;
  border-bottom:1px solid #e2e8f0;
}
.hz-nokta{ display:flex; gap:.28rem; }
.hz-nokta span{ width:.5rem; height:.5rem; border-radius:999px; background:#cbd5e1; }
.hz-nokta span:first-child{ background:#f87171; }
.hz-nokta span:nth-child(2){ background:#fbbf24; }
.hz-nokta span:nth-child(3){ background:#34d399; }
.hz-adres{
  flex:1 1 auto;
  min-width:0;
  padding:.3rem .6rem;
  border-radius:999px;
  background:#fff;
  border:1px solid #e2e8f0;
  font-size:.7rem;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* -- SABLON: sonuc (arama sonucu benzetimi) --
   Sıralama iddiası taşımaz; markanın altındaki sonuçlar
   bilerek isimsiz gri çubuklardır. */
.hz-serp{ padding:.9rem 1rem 1.05rem; }
.hz-serp-arama{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .8rem;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size:.8rem;
  color:#334155;
  margin-bottom:.9rem;
}
.hz-serp-arama i{ color:#94a3b8; font-size:.75rem; }
.hz-serp-satir{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  padding:.65rem;
  border-radius:.6rem;
  margin-bottom:.4rem;
}
.hz-serp-satir.hz-aktif{
  background:linear-gradient(90deg,rgba(37,99,235,.10),rgba(37,99,235,0));
  border:1px solid rgba(37,99,235,.22);
}
.hz-serp-sira{
  flex:0 0 auto;
  width:1.4rem; height:1.4rem;
  border-radius:.4rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700;
  background:#e2e8f0; color:#64748b;
}
.hz-serp-satir.hz-aktif .hz-serp-sira{ background:var(--hz-r2); color:#fff; }
.hz-serp-marka{ font-size:.8rem; font-weight:700; color:#0f172a; }
.hz-serp-url{ font-size:.68rem; color:#16a34a; margin-top:.1rem; }
.hz-cubukcuk{ height:.4rem; border-radius:999px; background:#e2e8f0; margin-top:.4rem; }
.hz-not{
  margin:.55rem 0 0;
  font-size:.65rem;
  color:#94a3b8;
  text-align:right;
}

/* -- SABLON: web (tarayici cercevesi + hizmet gorseli) -- */
.hz-web-gorsel{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#e2e8f0;
}
.hz-web-alt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:.6rem .8rem;
  background:#fff;
  border-top:1px solid #e2e8f0;
  font-size:.7rem;
  color:#64748b;
}
.hz-web-alt strong{ color:#0f172a; font-weight:700; }

/* Mobil onizleme: masaustu cercevenin kosesine oturur */
.hz-mobil{
  position:absolute;
  right:-.35rem;
  bottom:-1.5rem;
  width:5.2rem;
  border-radius:.85rem;
  background:#0f172a;
  border:3px solid rgba(255,255,255,.65);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.7);
  overflow:hidden;
}
.hz-mobil img{ display:block; width:100%; aspect-ratio:9/16; object-fit:cover; }
@media (max-width:639px){ .hz-mobil{ display:none; } }

/* -- SABLON: harita (harita karti benzetimi) -- */
.hz-harita{ position:relative; }
.hz-harita-alan{
  position:relative;
  height:11rem;
  background:
    linear-gradient(#e8eef5,#e8eef5);
  overflow:hidden;
}
/* Yol cizgileri - sade CSS */
.hz-harita-alan::before,
.hz-harita-alan::after{
  content:"";
  position:absolute;
  background:#fff;
}
.hz-harita-alan::before{ left:0; right:0; top:52%; height:.7rem; transform:rotate(-6deg); }
.hz-harita-alan::after{ top:0; bottom:0; left:38%; width:.6rem; transform:rotate(9deg); }
.hz-harita-blok{
  position:absolute;
  background:#dbe4ee;
  border-radius:.2rem;
}
.hz-pin{
  position:absolute;
  left:50%; top:38%;
  transform:translate(-50%,-50%);
  width:2.1rem; height:2.1rem;
  border-radius:999px;
  background:var(--hz-r2);
  border:3px solid #fff;
  box-shadow:0 8px 18px -5px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem;
  z-index:2;
}
.hz-pin-dalga{
  position:absolute;
  left:50%; top:38%;
  transform:translate(-50%,-50%);
  width:2.1rem; height:2.1rem;
  border-radius:999px;
  background:var(--hz-r2);
  opacity:.35;
  animation:hz-dalga 2.6s ease-out infinite;
}
@keyframes hz-dalga{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.35; }
  100%{ transform:translate(-50%,-50%) scale(3.1); opacity:0; }
}
.hz-harita-bilgi{
  padding:.85rem 1rem 1rem;
  background:#fff;
}
.hz-harita-ad{ font-size:.85rem; font-weight:700; color:#0f172a; }
.hz-harita-sat{
  display:flex; align-items:center; gap:.4rem;
  margin-top:.35rem;
  font-size:.72rem; color:#64748b;
}
.hz-harita-btn{
  display:flex; gap:.4rem; margin-top:.7rem;
}
.hz-harita-bilgi .hz-not{ text-align:left; margin-top:.6rem; }
.hz-harita-btn span{
  flex:1 1 0;
  text-align:center;
  padding:.4rem .3rem;
  border-radius:.5rem;
  background:#f1f5f9;
  font-size:.68rem;
  font-weight:600;
  color:#475569;
}
.hz-harita-btn span:first-child{ background:var(--hz-r2); color:#fff; }
.hz-harita-servis{
  position:absolute;
  left:.7rem; top:.7rem;
  z-index:3;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  font-size:.65rem;
  font-weight:700;
  color:#334155;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.25);
}

/* -- SABLON: reklam (kampanya akisi) -- */
.hz-ads{ padding:.95rem 1rem 1.1rem; }
.hz-ads-ust{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.7rem; margin-bottom:.8rem;
  border-bottom:1px solid #e2e8f0;
}
.hz-ads-servis{ font-size:.78rem; font-weight:700; color:#0f172a; }
.hz-ads-durum{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.66rem; font-weight:600; color:#16a34a;
}
.hz-ads-durum::before{
  content:""; width:.4rem; height:.4rem; border-radius:999px; background:#16a34a;
}
.hz-ads-adim{
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .1rem;
}
.hz-ads-sira{
  flex:0 0 auto;
  width:1.55rem; height:1.55rem;
  border-radius:.45rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--hz-r2); color:#fff;
  font-size:.68rem; font-weight:700;
}
.hz-ads-ad{ font-size:.78rem; font-weight:600; color:#334155; flex:1 1 auto; }
.hz-ads-cizgi{
  height:.35rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--hz-r2),rgba(148,163,184,.35));
  flex:0 0 4.5rem;
}
.hz-ads-not{
  margin:.75rem 0 0;
  padding-top:.7rem;
  border-top:1px solid #e2e8f0;
  font-size:.66rem;
  color:#94a3b8;
}

/* ---------------- MOBILDE MOCKUP ---------------- */
@media (max-width:1023px){
  .hz-gorsel{ order:2; }
  .hz-kart{ max-width:26rem; margin:0 auto; }
}

/* ==================================================================
   "NELER YAPIYORUZ" BOLUMU
   ------------------------------------------------------------------
   Renkli ust bandin hemen altinda, acik zeminde. Renk temasi ust
   bolumle ayni (--hz-r1 / --hz-r2 HTML uzerinden veriliyor) ki iki
   bolum birbirinin devami gibi okunsun.

   Renk tonlari color-mix ile uretiliyor; desteklemeyen tarayicida
   ondan ONCE yazilmis duz renk gecerli kalir (progressive enhancement).
================================================================== */

.ny{
  --hz-r1:#132a4a;
  --hz-r2:#2563eb;
  position:relative;
  background:#fff;
  padding:3rem 0;
  overflow:hidden;
}
@media (min-width:1024px){ .ny{ padding:4rem 0; } }

/* Ust banttan gecisi yumusatan ince renkli cizgi */
.ny::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--hz-r1),var(--hz-r2),transparent);
  opacity:.65;
}

.ny-ust{
  max-width:44rem;
  margin:0 0 2rem;
}
@media (min-width:1024px){ .ny-ust{ margin-bottom:2.5rem; } }

.ny-etiket{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:#f1f5f9;
  background:color-mix(in srgb,var(--hz-r2) 10%,#fff);
  color:#334155;
  color:color-mix(in srgb,var(--hz-r1) 78%,#334155);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ny-etiket i{ font-size:.68rem; color:var(--hz-r2); }

.ny-baslik{
  margin:.9rem 0 0;
  font-size:clamp(1.45rem,3.2vw,2.1rem);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
  text-wrap:balance;
  scroll-margin-top:6rem;   /* icindekiler capasi ustte kalmasin */
}

.ny-alt{
  margin:.75rem 0 0;
  font-size:.95rem;
  line-height:1.7;
  color:#64748b;
}

/* ---- Kart izgarasi ----
   auto-fit: hizmete gore 3 ile 7 arasi madde geliyor; sabit sutun
   sayisi yerine sigdigi kadar sutun acilir, tek basina kalan kart
   satiri doldurur.

   Alt sinir 20rem: paneldeki aciklamalar 70-250 karakter arasinda.
   17.5rem denendiginde genis ekranda 4 sutun aciliyor ve 286px'lik
   kartlarda metin fazla siki duruyordu; 20rem en fazla 3 sutuna
   izin veriyor, satir uzunlugu okunakli kaliyor. */
.ny-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:1rem;
}
@media (min-width:1024px){ .ny-izgara{ gap:1.15rem; } }

.ny-kart{
  position:relative;
  padding:1.5rem 1.35rem 1.4rem;
  border-radius:1rem;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.ny-kart:hover{
  border-color:#cbd5e1;
  border-color:color-mix(in srgb,var(--hz-r2) 40%,#e5e7eb);
  box-shadow:0 14px 30px -14px rgba(15,23,42,.28);
  transform:translateY(-3px);
}

/* Ust kenardaki renkli cizgi: hover'da soldan saga buyur */
.ny-cizgi{
  position:absolute;
  left:0; top:0;
  height:3px;
  width:2.5rem;
  background:linear-gradient(90deg,var(--hz-r1),var(--hz-r2));
  border-radius:0 3px 3px 0;
  transition:width .35s cubic-bezier(.16,1,.3,1);
}
.ny-kart:hover .ny-cizgi{ width:100%; }

.ny-ikon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.35rem;
  height:2.35rem;
  margin-bottom:.9rem;
  border-radius:.7rem;
  background:#eff6ff;
  background:color-mix(in srgb,var(--hz-r2) 12%,#fff);
  color:var(--hz-r2);
  font-size:.82rem;
  transition:background .25s ease,color .25s ease;
}
.ny-kart:hover .ny-ikon{
  background:var(--hz-r2);
  color:#fff;
}

.ny-kart-baslik{
  margin:0;
  scroll-margin-top:6rem;   /* icindekiler capasi header altinda kalmasin */
  font-size:1.02rem;
  line-height:1.35;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-.01em;
}

.ny-kart-metin{
  margin:.55rem 0 0;
  font-size:.875rem;
  line-height:1.68;
  color:#64748b;
}

/* ---- Kapanis seridi ---- */
.ny-kapanis{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.75rem;
  padding:1.25rem 1.4rem;
  border-radius:1rem;
  background:#f8fafc;
  background:color-mix(in srgb,var(--hz-r2) 6%,#f8fafc);
  border:1px solid #e5e7eb;
  border-color:color-mix(in srgb,var(--hz-r2) 18%,#e5e7eb);
}
.ny-kapanis-metin{
  margin:0;
  font-size:.925rem;
  line-height:1.6;
  font-weight:600;
  color:#334155;
  max-width:34rem;
}
.ny-kapanis-btn{ display:flex; flex-wrap:wrap; gap:.6rem; }

.ny-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.2rem;
  border-radius:.75rem;
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.ny-btn:hover{ transform:translateY(-2px); }
.ny-btn-birincil{
  background:linear-gradient(135deg,var(--hz-r1),var(--hz-r2));
  color:#fff;
  box-shadow:0 10px 22px -10px rgba(15,23,42,.55);
}
.ny-btn-ikincil{
  background:#fff;
  border-color:#e2e8f0;
  color:#334155;
}
.ny-btn-ikincil:hover{ border-color:#cbd5e1; }

@media (max-width:639px){
  .ny-kapanis{ flex-direction:column; align-items:flex-start; }
  .ny-kapanis-btn{ width:100%; }
  .ny-btn{ flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce){
  .ny-kart:hover,.ny-btn:hover{ transform:none; }
  .ny-cizgi{ transition:none; }
}

/* ==================================================================
   "DAHA FAZLA OKU" KATLAMASI
   ------------------------------------------------------------------
   Icerik display:none ILE GIZLENMIYOR. Katlanmis hâlde de DOM'da ve
   render agacinda duruyor, sadece max-height ile kirpiliyor. Boylece
   arama motorlari ve dil modelleri icerigin tamamini gorur; Google'in
   "acilir bolum icindeki icerik" kurali da bunu kabul eder.
================================================================== */

/* JS KAPALIYSA KATLAMA HIC UYGULANMAZ.
   Varsayilan hâl "acik"; katlamayi devreye sokan, sayfanin basinda
   <html>'e js-hz sinifini ekleyen kucuk satir ici script. Boylece
   JavaScript calismayan bir tarayicida (ve metin tabanli botlarda)
   icerigin tamami dogrudan gorunur, buton da hic basilmaz. */
.hz-devam{
  position:relative;
  max-height:none;
}
.js-hz .hz-devam{
  max-height:0;
  overflow:hidden;
  transition:max-height .55s cubic-bezier(.16,1,.3,1);
}
.js-hz .hz-devam.hz-acik{ overflow:visible; }

.hz-perde{ display:none; }

/* Katlaniyken alttaki solma perdesi */
.js-hz .hz-perde{
  display:block;
  position:relative;
  margin-top:-3.5rem;
  padding-top:3.5rem;
  background:linear-gradient(to bottom,rgba(249,250,251,0),#f9fafb 62%);
  pointer-events:none;
}
.js-hz .hz-perde > *{ pointer-events:auto; }

/* Acildiktan sonra perde bir "kapat" butonuna doner: solma kalkar */
.js-hz .hz-perde.hz-bitti{
  margin-top:2rem;
  padding-top:0;
  background:none;
}

.hz-oku-sar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding-bottom:.25rem;
}
.hz-oku{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.8rem 1.6rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#1d4ed8;
  font-size:.875rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(15,23,42,.25);
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
  font-family:inherit;
}
.hz-oku:hover{
  background:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
  transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(29,78,216,.6);
}
.hz-oku i{ font-size:.72rem; transition:transform .3s ease; }
.hz-oku[aria-expanded="true"] i{ transform:rotate(180deg); }
.hz-oku-not{
  font-size:.72rem;
  color:#9ca3af;
}

/* Teaser paragrafi */
.hz-teaser{
  font-size:1.02rem;
  line-height:1.78;
  color:#4b5563;
}
.hz-teaser p{ margin:0 0 1rem; }
.hz-teaser p:last-child{ margin-bottom:0; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .hz-devam{ transition:none; }
  .hz-pin-dalga{ animation:none; }
  .hz-madde:hover,.hz-btn:hover,.hz-oku:hover{ transform:none; }
}