/* ============================================================
   temizlepro.com — ortak tasarim sistemi
   ------------------------------------------------------------
   TEK KAYNAK. Bu dosyadan once her bolum (app/partials/*.php)
   kendi <style> blogunu tasiyordu: ayni secici bes ayri yerde
   yaziliyor, bir dugmenin dolgusu sayfadan sayfaya degisiyordu.
   Artik renk, olcu, dugme, ust bar, alt bilgi ve kart kaliplari
   yalnizca burada tanimlanir.

   Olcu ve renkler temizle.pro ile BIREBIR ayni:
   anasayfa/assets/shared.css + index.php <style>. Biri degisirse
   oteki de guncellenir — iki site ayni kalibi paylasir.

   Bootstrap 5.3 yuklu kalir (modal, offcanvas, izgara, collapse
   kullaniliyor). Burasi Bootstrap'in USTUNE biner: --bs-*
   degiskenleri bizim belirtecelerimize baglanir, gorunum
   temizle.pro'nun olur.
   ============================================================ */


/* ============================================================
   1) BELIRTECLER
   temizle.pro index.php :root ile ayni degerler. --kt-* adlari
   eski bolumlerde kullanildigi icin takma ad olarak korunur.
   ============================================================ */
:root{
  /* Renk */
  --primary:#1f66d1;
  --primary-dark:#134aa5;
  --primary-light:#2c7dff;
  --accent:#46d2ff;
  --ink:#0b1b33;
  --ink-soft:#1b2a44;
  --muted:#546179;
  --card:#ffffff;
  --bg:#f5f8ff;
  --bg-alt:#eef4ff;
  --stroke:rgba(13,34,65,.12);
  --ok:#17875b;
  --ok-bg:#e8f7f0;
  --uyari:#9a6200;
  --uyari-bg:#fff7e8;
  --hata:#c2334d;
  --hata-bg:#fdeef1;

  /* Golge */
  --golge-sm:0 10px 24px rgba(13,34,65,.08);
  --golge:0 16px 36px rgba(13,34,65,.14);
  --golge-lg:0 24px 56px rgba(15,23,42,.18);

  /* Kose */
  --kose-sm:8px;
  --kose:12px;
  --kose-md:16px;
  --kose-lg:18px;
  --kose-xl:22px;

  /* Olcu */
  --olcu:min(1120px, 92vw);
  --bolum-dolgu:70px;

  /* Eski --kt-* adlari (geriye donuk; yeni kod yukaridakileri kullanir) */
  --kt-primary:var(--primary);
  --kt-primary-dark:var(--primary-dark);
  --kt-primary-rgb:31,102,209;
  --kt-accent:var(--accent);
  --kt-accent-rgb:70,210,255;
  --kt-warm:#8fd6ff;
  --kt-warm-rgb:143,214,255;
  --kt-ink:var(--ink);
  --kt-muted:var(--muted);
  --kt-bg:var(--bg);
  --kt-bg-alt:var(--bg-alt);
  --kt-card:var(--card);
  --kt-border:var(--stroke);
  --kt-shadow-sm:var(--golge-sm);
  --kt-shadow:var(--golge);
  --kt-radius-sm:var(--kose);
  --kt-radius:var(--kose-md);
  --kt-radius-lg:var(--kose-xl);

  /* Bootstrap koprusu */
  --bs-body-font-family:"Manrope","Segoe UI",Tahoma,sans-serif;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--bg);
  --bs-primary:var(--primary);
  --bs-primary-rgb:31,102,209;
  --bs-info:var(--accent);
  --bs-info-rgb:70,210,255;
  --bs-link-color:var(--primary);
  --bs-link-hover-color:var(--primary-dark);
  --bs-border-color:var(--stroke);
  --bs-border-radius:var(--kose-md);
  --bs-border-radius-lg:var(--kose-xl);
  --bs-border-radius-sm:var(--kose);
  --bs-secondary-color:var(--muted);
}


/* ============================================================
   2) TEMEL
   ============================================================ */
*{ box-sizing:border-box; }

html, body{
  overflow-x:hidden;      /* mobilde saga kaymayi engeller */
  max-width:100%;
}

body{
  margin:0;
  min-height:100%;
  font-family:"Manrope","Segoe UI",Tahoma,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* Cekmece acikken govde kaymasin. */
html.menu-open,
body.menu-open{ overflow:hidden; height:100%; }

/* Baglanti rengi.
   `a{color:inherit}` yazilmisti; bu, govde metni icindeki baglantilari
   cevresindeki yaziyla BIREBIR ayni gosteriyordu (renk yok, alti cizili
   degil) — kullanici tiklanabilir oldugunu anlamiyordu. Eski surumde
   yalnizca text-decoration:none vardi, renk Bootstrap'ten geliyordu.
   Govde ici baglantilar mavi ve hover'da alti cizili; gezinti/dugme/kart
   gibi kendi rengi olan yerler asagida ayrica inherit'e cekilir. */
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-dark); text-decoration:underline; }

/* Kendi rengini tasiyan baglantilar metin rengini devralir. */
.site-header a,
.site-footer a,
.nav-dropdown a,
.hesap-dropdown a,
.hesap-menu-liste a,
.legal-aside a,
.footer-links a,
.footer-contact a,
.footer-bottom-links a,
.trust-badge,
.siparis-kart a.siparis-no,
.adres-kart a,
.btn,
.tp-rozet,
.page-hero a{ color:inherit; }
.site-header a:hover,
.site-footer a:hover,
.nav-dropdown a:hover,
.hesap-dropdown a:hover,
.hesap-menu-liste a:hover,
.legal-aside a:hover,
.btn:hover,
.tp-rozet:hover{ text-decoration:none; }

/* hidden ozniteligi HER ZAMAN kazanir.
   Tarayicinin kendi [hidden]{display:none} kurali yazar stil sayfasina
   yenilir. Bu dosyada .tp-bos{display:grid} gibi display veren kurallar
   var; onlar hidden'i eziyor ve "Bu suzgece uyan siparis yok" kutusu
   siparisler listelenirken bile gorunuyordu. */
[hidden]{ display:none !important; }

img{ max-width:100%; display:block; }

h1,h2,h3,h4,h5,h6,.display-5,.display-6{
  font-family:"Sora","Manrope","Segoe UI",sans-serif;
  letter-spacing:-.02em;
  color:var(--ink-soft);
}

.lead{ font-size:1.1rem; color:var(--muted); }

/* temizle.pro'nun olcusu: width:min(1120px, 92vw).
   Bootstrap .container'i da buna cekilir ki iki sitede icerik ayni
   genislikte baslasin ve bitsin.

   DIKKAT — yan dolgu SIFIRLANMAZ. Bootstrap'in .row kurali
   `margin-inline: calc(-.5 * var(--bs-gutter-x))` ile kabin dolgusunu
   ters cevirerek sutunlari kenara hizalar. Dolgu sifirlanirsa her .row
   iki yandan 12px TASAR; govdede overflow-x:hidden oldugu icin kaydirma
   cubugu cikmaz ama icerik dar ekranda kenardan kirpilir. Sitede 26
   adet .row var, bu yuzden Bootstrap'in gutter dolgusu korunur.
   Sonuctaki 12px'lik ic bosluk goz ile ayirt edilmez. */
.container,
.container-fluid.tp-olcu{
  width:var(--olcu);
  max-width:var(--olcu);
  margin-inline:auto;
}

.sr-only,
.gorsel-gizli{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

section{ scroll-margin-top:96px; }

.section{ padding:var(--bolum-dolgu) 0; }

.section-title{
  font-family:"Sora","Manrope",sans-serif;
  font-size:clamp(1.5rem, 2.2vw, 2.1rem);
  text-align:center;
  margin:0 0 34px;
  color:var(--ink-soft);
}

.eyebrow{
  margin:0 0 10px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
}


/* ============================================================
   3) DUGMELER
   temizle.pro index.php .btn ailesi. Bootstrap'in .btn-primary /
   .btn-outline-* siniflari da ayni govdeye baglanir: eski kod
   degismeden yeni gorunumu alir.
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:var(--kose);
  padding:12px 20px;
  font-weight:600;
  font-size:.96rem;
  line-height:1.25;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  cursor:pointer;
  white-space:nowrap;
}
/* Klavye odagi — outline KULLANILIR, box-shadow degil.
   Odak halkasi once box-shadow ile veriliyordu; ama .btn-primary:focus
   ve .btn-ghost:focus kurallari AYNI ozgullukte (0,2,0) ve dosyada
   SONRA geldikleri icin o golgeyi eziyordu. Sonuc: klavyeyle gezen
   kullanici hicbir dugmede odak goremiyordu (WCAG 2.4.7 ihlali).
   outline hicbir box-shadow tarafindan ezilmez. */
.btn:focus-visible{
  outline:3px solid rgba(31,102,209,.55);
  outline-offset:2px;
}
.btn-outline:focus-visible,
.btn-play:focus-visible{
  outline-color:rgba(255,255,255,.85);
}
/* Fare tiklamasinda halka cikmasin (tarayici :focus-visible'i ayirir). */
.btn:focus:not(:focus-visible){ outline:0; }

.btn-primary,
.btn-primary:active{
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 22px rgba(31,102,209,.28);
}
.btn-primary:hover,
.btn-primary:focus{
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(31,102,209,.3);
}

/* temizle.pro'da ikincil eylem: beyaz zemin, ince mavi kenar. */
.btn-ghost,
.btn-outline-primary,
.btn-outline-secondary,
.btn-light{
  background:#fff;
  color:var(--primary-dark);
  border-color:rgba(31,102,209,.25);
  box-shadow:none;
}
.btn-ghost:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-ghost:focus,
.btn-outline-primary:focus,
.btn-outline-secondary:focus,
.btn-light:focus{
  background:#f7faff;
  color:var(--primary-dark);
  border-color:rgba(31,102,209,.55);
  box-shadow:0 10px 20px rgba(31,102,209,.12);
}

/* Koyu zemin uzerindeki saydam dugme (hero, cta). */
.btn-outline{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.5);
}
.btn-outline:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.8);
}

.btn-danger{
  background:linear-gradient(135deg,#d23a55,#e2566f);
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 22px rgba(194,51,77,.24);
}
.btn-danger:hover{ color:#fff; transform:translateY(-1px); }

.btn-outline-danger{
  background:#fff;
  color:var(--hata);
  border-color:rgba(194,51,77,.3);
}
.btn-outline-danger:hover{
  background:var(--hata-bg);
  color:var(--hata);
  border-color:rgba(194,51,77,.6);
}

.btn-sm{ padding:8px 14px; font-size:.86rem; border-radius:var(--kose-sm); gap:7px; }
.btn-lg{ padding:15px 26px; font-size:1.02rem; border-radius:var(--kose-md); }

.btn-link{
  background:none;
  border:none;
  box-shadow:none;
  padding:6px 2px;
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
}
.btn-link:hover{ color:var(--primary-dark); text-decoration:underline; transform:none; }

/* Devre disi her varyantta ayni okunur. */
.btn:disabled,
.btn.disabled{
  opacity:.55;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}

/* ---- Eylem sirasi ----
   temizle.pro'da birincil eylem HER ZAMAN solda, ikincil sagda;
   dar ekranda alt alta ve tam genislikte. Eylem gruplari bu iki
   sinifi kullanir, boylece dugme konumu sayfadan sayfaya degismez. */
.tp-eylemler{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.tp-eylemler-sag{ justify-content:flex-end; }
.tp-eylemler-orta{ justify-content:center; }


/* ============================================================
   4) UST BAR
   temizle.pro includes/header.php + shared.css "UST BAR".
   Masaustu: marka solda, baglantilar yaninda, eylemler sagda.
   <=980px: menu simgesi SOL kenarda, cekmece SOLDAN acilir.
   <=600px: marka ortada, simge sol, hesap sag.
   ============================================================ */
.site-header{
  --ust-dolgu:14px;
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,23,42,.08);
}

.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding-top:var(--ust-dolgu);
  padding-bottom:var(--ust-dolgu);
}

/* ---- Marka ----
   Logo bir GORSELDIR (assets/marka/temizlepro-logo.png); sitede
   yeniden cizilmez. Olcu her zaman YUKSEKLIKTEN verilir, genislik
   gorselin kendi oranindan gelir — logo degisse de duzen bozulmaz.
   Yukseklik: 46 / 40 / 34 px.

   max-width:none SART: Bootstrap'in ve bu dosyanin img{max-width:100%}
   kurali dar ekranda logoyu kaba gorunecek kadar kucultur. */
.site-header .brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}
.brand-logo{
  height:48px;
  width:auto;
  max-width:none;
  flex:0 0 auto;
}
/* <picture> ogesi satir ici kutu olusturur; logonun dikey hizasi
   bozulmasin diye blok yapilir. */
.site-header .brand picture,
.footer-brand picture{ display:block; line-height:0; }

/* ---- Baglantilar ---- */
.site-header .nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:16px;
  color:#283754;
  font-weight:600;
  font-size:.95rem;
}
.site-header .nav-links > a,
.site-header .nav-links > .nav-item > a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0;
}
.site-header .nav-links > a:hover,
.site-header .nav-links > .nav-item > a:hover{ color:var(--primary-dark); }
.site-header .nav-links svg{ width:14px; height:14px; }

.nav-item{ position:relative; display:flex; align-items:center; }

.nav-dropdown{
  position:absolute;
  left:0;
  top:100%;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:0 0 var(--kose) var(--kose);
  border-top-color:rgba(15,23,42,.08);
  padding:10px;
  min-width:235px;
  box-shadow:var(--golge);
  display:grid;
  gap:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:5;
}
/* Fare yazidan kutuya inerken ogenin disina cikmasin. */
.nav-dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-10px;
  height:10px;
}
.nav-dropdown a{
  padding:10px 12px;
  border-radius:var(--kose-sm);
  font-weight:600;
  color:#223150;
  white-space:nowrap;
}
.nav-dropdown a:hover{ background:#f0f5ff; color:var(--primary-dark); }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* ---- Sag eylemler ---- */
.site-header .nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}

/* Cekmece ici giris dugmesi — masaustunde gizli, <=980px'te gorunur. */
.nav-links .nav-giris{ display:none; }

/* Telefon hapi — temizle.pro .nav-phone */
.nav-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(31,102,209,.22);
  background:rgba(31,102,209,.08);
  color:var(--primary-dark);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.2px;
  white-space:nowrap;
}
.nav-phone::before{
  content:"";
  width:8px; height:8px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:0 0 0 4px rgba(31,102,209,.16);
}
.nav-phone:hover{ border-color:rgba(31,102,209,.45); color:var(--primary-dark); }

/* ---- Hesap menusu (<details>) ---- */
.hesap-menu{ position:relative; }
.hesap-menu > summary{
  list-style:none;
  cursor:pointer;
}
.hesap-menu > summary::-webkit-details-marker{ display:none; }
.hesap-menu > summary svg.ok{ transition:transform .2s ease; }
.hesap-menu[open] > summary svg.ok{ transform:rotate(180deg); }
/* Ust bardaki kucuk profil dairesi. Olcu daha once satir ici style
   ile veriliyordu; oyle olunca dar ekranda CSS ile buyutulemiyordu.
   Secici .hesap-menu ile nitelenir: ortak .hesap-avatar kurali (46px)
   bu dosyada DAHA SONRA geliyor ve esit ozgullukte oldugu icin aksi
   halde onu eziyor — avatar 46px olup ust bar iki satira dusuyordu. */
.hesap-menu .hesap-avatar-ust{ width:24px; height:24px; font-size:.72rem; }

.hesap-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--kose);
  padding:8px;
  min-width:250px;
  box-shadow:var(--golge);
  display:grid;
  gap:4px;
  z-index:1200;
}
.hesap-dropdown-bas{
  padding:10px 12px 12px;
  margin-bottom:4px;
  border-bottom:1px solid var(--stroke);
}
.hesap-dropdown-bas strong{
  display:block;
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.3;
}
.hesap-dropdown-bas span{
  display:block;
  color:var(--muted);
  font-size:.84rem;
  margin-top:2px;
}
.hesap-dropdown form{ margin:0; }
.hesap-dropdown a,
.hesap-dropdown button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:var(--kose-sm);
  background:none;
  font:inherit;
  font-weight:600;
  font-size:.92rem;
  color:#223150;
  text-align:left;
  cursor:pointer;
}
.hesap-dropdown a:hover,
.hesap-dropdown button:hover{ background:#f0f5ff; color:var(--primary-dark); }
.hesap-dropdown .cikis{ color:var(--hata); }
.hesap-dropdown .cikis:hover{ background:var(--hata-bg); color:var(--hata); }
.hesap-dropdown svg{ width:17px; height:17px; flex:0 0 auto; opacity:.75; }

/* Okunmamis mesaj / bekleyen is rozeti */
.nav-rozet{
  display:inline-grid;
  place-items:center;
  min-width:19px; height:19px;
  padding:0 5px;
  margin-left:auto;
  border-radius:999px;
  background:var(--hata);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  line-height:1;
}

/* ---- Menu dugmesi ve cekmece ---- */
.site-header .menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:40px; height:40px;
  padding:0;
  border:1px solid rgba(31,102,209,.22);
  border-radius:var(--kose);
  background:#f3f7ff;
  color:var(--primary-dark);
  cursor:pointer;
}
.site-header .menu-toggle:hover{ background:#e8f0ff; }

.menu-header{
  display:none;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  color:var(--ink-soft);
  border-bottom:1px solid rgba(15,23,42,.08);
  padding-bottom:12px;
  margin-bottom:6px;
}
.menu-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid rgba(31,102,209,.18);
  background:#f3f7ff;
  color:var(--primary-dark);
  font-size:1.1rem;
  cursor:pointer;
}

.nav-scrim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:900;
  display:none;
}
body.menu-open .nav-scrim{ opacity:1; pointer-events:auto; }

/* Masaustunde acilir kutular ust barin alt cizgisinden sarkar. */
@media (min-width: 981px){
  .site-header .nav-links{
    align-self:stretch;
    margin-top:calc(-1 * var(--ust-dolgu));
    margin-bottom:calc(-1 * var(--ust-dolgu));
  }
  .site-header .nav-item{ align-self:stretch; }
  .site-header .nav-dropdown{ top:100%; }

  /* Telefon hapi ust barda IKI KEZ bulunur: biri sag eylemlerde
     (masaustu), biri cekmecenin icinde (<=980px, ust bardaki gizlenince
     numara kaybolmasin diye). Cekmecedeki kopyayi masaustunde gizleyen
     kural eksikti; iki ayri numara hapi yan yana cikiyordu. */
  .site-header .nav-links .nav-phone{ display:none; }
}

@media (max-width: 980px){
  .site-header{ --ust-dolgu:13px; }
  .site-header .nav{ flex-wrap:nowrap; gap:12px; }
  /* Marka solda; hesap dairesi ve menu dugmesi SAGDA yan yana. Bosluk
     .nav-actions'in sol kenarina birakilir (margin-left:auto), dugme
     de hemen onun yanina gelir — dugmeye ayrica auto verilirse bosluk
     IKIYE bolunur ve avatar ust barin ortasinda asili kalir. */
  .site-header .menu-toggle{ display:inline-flex; order:3; margin-left:0; }
  .site-header .nav-actions{ margin-left:auto; }
  .brand-logo{ height:40px; }

  /* Cekmece SAGDAN acilir — dugme sagda oldugu icin hareket oradan
     baslamali, yoksa dugmeye basinca menu ters yonden gelir.
     DIKKAT — yukseklik `top:0; bottom:0` ile VERILMEZ.
     .site-header uzerinde backdrop-filter var; backdrop-filter degeri
     none olmayan bir oge, icindeki position:fixed ogeler icin KONTEYNER
     BLOGU kurar. Cekmece ust barin icinde oldugu icin top/bottom
     viewport'a degil ust barin ~74px'lik kutusuna gore cozulurdu:
     cekmece 74px'e cokuyor ve <=980px'te gezintinin TAMAMI erisilemez
     hale geliyordu. temizle.pro ayni yerde 100vh kullaniyor;
     100dvh mobil tarayici cubugunu da hesaba katar. */
  .site-header .nav-links{
    position:fixed;
    right:0; left:auto;
    top:0;
    height:100vh;
    height:100dvh;
    width:min(320px, 86vw);
    margin-left:0;
    padding:18px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:#fff;
    border-left:1px solid var(--stroke);
    box-shadow:-24px 0 48px rgba(13,34,65,.18);
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
    z-index:1100;
  }
  .site-header.nav-open .nav-links{ transform:translateX(0); }
  .site-header .nav-links .menu-header{ display:flex; }
  .site-header .nav-links > a,
  .site-header .nav-links > .nav-item > a{
    justify-content:space-between;
    padding:12px 12px;
    border-radius:var(--kose-sm);
  }
  .site-header .nav-links > a:hover,
  .site-header .nav-links > .nav-item > a:hover{ background:#f3f7ff; }
  .nav-item{ display:block; }

  /* Alt listeler cekmecede KAPALI baslar; baslik dokununca acilir
     (ust-bar.php). Masaustunde fare ustune gelince acilan bu kutu,
     dar ekranda `position:static` yapilip oldugu yerde birakilmisti —
     yani "Hizmetler" ve "Kurumsal" alt listeleri hep acik duruyor,
     menu uzayip asil baglantilar ekrandan tasiyordu. */
  .nav-dropdown{
    display:none;
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    border:0;
    box-shadow:none;
    padding:2px 0 6px 12px;
    min-width:0;
  }
  .nav-item.acik > .nav-dropdown{ display:grid; }
  .nav-dropdown::before{ display:none; }
  /* Baslikteki ok, sekme acikken ters doner. */
  .site-header .nav-item > .nav-item-toggle svg{ transition:transform .2s ease; }
  .site-header .nav-item.acik > .nav-item-toggle svg{ transform:rotate(180deg); }

  .nav-scrim{ display:block; }
  /* Telefon hapi ve giris dugmesi cekmeceye tasinir; ust barda yalnizca
     menu simgesi, marka ve (girisliyse) hesap menusu kalir. */
  .site-header .nav-actions .nav-phone,
  .site-header .nav-actions .nav-giris-ust{ display:none; }
  .site-header .nav-links .nav-phone{ justify-content:center; }

  /* Girisli kullanicida ust barda YALNIZCA profil dairesi kalir.
     Ad-soyad ve acilir ok gizlenir: dar ekranda uzun bir isim marka
     ile menu dugmesi arasindaki yeri yiyor, logo kuculuyordu. Isim
     zaten menu acilinca en ustte yaziyor. Okunmamis mesaj rozeti
     kalir — kullanicinin gormesi gereken tek bilgi odur. */
  .hesap-menu > summary .hesap-menu-ad,
  .hesap-menu > summary svg.ok{ display:none; }
  .hesap-menu > summary{
    padding:5px;
    gap:6px;
    border-radius:999px;
  }
  .hesap-menu .hesap-avatar-ust{ width:32px; height:32px; font-size:.86rem; }
  .nav-links .nav-giris{
    display:inline-flex;
    width:100%;
    justify-content:center;
    margin-top:10px;
  }
}

@media (max-width: 600px){
  .site-header{ --ust-dolgu:12px; }
  /* Marka solda, hesap menusu ortada, menu dugmesi sagda.
     Daha once simge soldaydi ve marka ORTAYA aliniyordu; menu sага
     tasininca marka da dogal yerine, sol kenara dondu. */
  .site-header .nav{
    display:grid;
    grid-template-columns:1fr auto auto;
    column-gap:10px;
  }
  .site-header .brand{ grid-column:1; justify-content:flex-start; }
  .site-header .nav-actions{ grid-column:2; justify-self:end; margin-left:0; }
  .site-header .menu-toggle{ grid-column:3; justify-self:end; margin-left:0; }
  .brand-logo{ height:34px; }
}

@media (max-width: 380px){
  .site-header .nav{ column-gap:6px; }
  /* Logo bu olcude de TAM gosterilir: 320px'lik ekranda kap 294px,
     logo ~139px tutuyor, menu dugmesine fazlasiyla yer kaliyor. */
  .brand-logo{ height:32px; }
  .hesap-dropdown{ right:-8px; min-width:min(260px, 88vw); }
}

/* ---- UST BAR: dorduncu baglanti ("Siparişim Ne Durumda?") ----
   .nav Bootstrap'ten flex-wrap:wrap alir; satir sigmazsa .nav-actions
   ikinci satira duser ve ust bar ~77px'ten ~145px'e cikar. Girisli
   kullanicida bu, yeni baglantidan ONCE de oluyordu ("Ahmet Yılmaz"
   1100px'te, uzun adla her genislikte). Kap en fazla ~1108px; 1218px'ten
   sonra genislik artmaz, yer ancak icerikten acilir.
   - Masaustunde hesap dugmesi dar ekrandaki gibi kompakt: bas harf
     dairesi (+ okunmamis rozeti + ok). Ad, menu acilinca en ustte yazar.
   - Girisli kullanicinin ust bardaki "Siparişlerim"i masaustunde gizli:
     ayni baglanti hesap menusunde, okunmamis rozeti avatarda. Cekmecede
     (<=980px) gorunmeye devam eder.
   - Baglanti araligi masaustunde 18px; telefon hapi 981-1199px'te gizli
     (numara alt bilgide ve iletisim bolumunde). 1180'de Manrope ile hap
     sigiyordu ama Manrope yuklenene kadar kullanilan Tahoma ile ust bar
     iki satira dusuyordu; iPad yatayda (1180) tel: zaten aranamaz.
   - Kap sorgulari em ile, yani tarayicinin varsayilan yazi boyutuyla
     buyur: 17px ve uzerinde hap her masaustu genisliginde gizlenir;
     18px+ dar genislikte baglanti araligi da daralir. 16px'te iki esik
     de kabin altinda kalir, gorunum medya sorgusuyla belirlenir. Kap
     sorgusunu tanimayan eski tarayici yalnizca medya sorgusunu uygular.
   Olcum 2026-10-20 (headless Chrome, canli sayfa + gercek ust-bar.php
   ciktisi), satir sonuna kalan pay, Manrope 16px: girissiz 981:+9,6
   1200:+45 1280+:+61; girisli ("Ahmet Yılmaz", 3 okunmamis) 981:+57
   1280+:+109. Tek satir esigi oncekinden geri degil: 18px 1024'ten,
   20px 1078'den, Tahoma 1024'ten itibaren. Onceki CSS'te girisli ust
   bar her genislikte iki satirdi. */
@media (min-width: 981px){
  .hesap-menu > summary .hesap-menu-ad{ display:none; }
  .hesap-menu > summary{ padding:5px 9px 5px 5px; gap:6px; border-radius:999px; }
  .site-header .nav-links > a.nav-sadece-cekmece{ display:none; }
  .site-header .nav-links{ gap:18px; }
  .site-header .nav{ container-type:inline-size; }
}
@media (min-width: 981px) and (max-width: 1199.98px){
  .site-header .nav-actions .nav-phone{ display:none; }
}
@container (max-width: 66em){
  .site-header .nav-actions .nav-phone{ display:none; }
}
@container (max-width: 55em){
  .site-header .nav-links{ gap:12px; margin-left:8px; }
}

/* Bulunulan sayfa: $ubAktif() aria-current yaziyordu ama gorunur bir
   isareti yoktu. */
.site-header .nav-links > a[aria-current="page"]{ color:var(--primary-dark); }
@media (min-width: 981px){
  .site-header .nav-links > a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--primary); }
}


/* ============================================================
   5) ALT BILGI
   temizle.pro shared.css "FOOTER" + "GUVEN / ODEME SERIDI".
   ============================================================ */
.site-footer{
  margin-top:60px;
  background:linear-gradient(180deg,#0d2044 0%,#0b1b33 100%);
  color:#c6d3e8;
  font-size:.94rem;
  line-height:1.65;
  text-align:left;
  padding:0;
}

.footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;
  gap:36px;
  padding:52px 0 40px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.footer-brand .brand-logo{ height:42px; }

.footer-about{ margin:0 0 16px; color:#a9bcd8; max-width:38ch; }

.footer-col h2,
.footer-col h4{
  margin:0 0 14px;
  font-family:"Manrope","Segoe UI",sans-serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
}

.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-links a{ color:#c6d3e8; transition:color .18s ease; }
.footer-links a:hover{ color:#7cc4ff; text-decoration:underline; }

.footer-contact{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; flex:0 0 auto; margin-top:3px; color:#5fb0ff; }
.footer-contact a{ color:#c6d3e8; }
.footer-contact a:hover{ color:#7cc4ff; text-decoration:underline; }
.footer-contact strong{ color:#e7eefb; font-weight:600; }

.footer-trust{
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.trust-badges{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#e7eefb;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
}
.trust-badge svg{ width:17px; height:17px; flex:0 0 auto; color:#3ddc97; }
.trust-badge.is-link:hover{ border-color:rgba(124,196,255,.55); background:rgba(255,255,255,.12); color:#e7eefb; }
.trust-badge small{ display:block; font-weight:500; font-size:.72rem; color:#9fb4d3; }

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:22px 0 28px;
  font-size:.86rem;
  color:#8ba3c6;
}
.footer-bottom-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom-links a:hover{ color:#7cc4ff; text-decoration:underline; }

@media (max-width: 980px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:28px; padding:42px 0 32px; }
  .footer-trust{ justify-content:center; text-align:center; }
}
@media (max-width: 600px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-about{ max-width:none; }
  .footer-bottom{ justify-content:center; text-align:center; }
}


/* ============================================================
   6) SAYFA BASLIGI VE YASAL SAYFALAR
   temizle.pro shared.css "YASAL / KURUMSAL SAYFALAR".
   ============================================================ */
.page-hero{
  background:linear-gradient(135deg,#1c56b7 0%,#3a84ff 60%,#8fd6ff 100%);
  color:#fff;
  padding:56px 0 48px;
}
.page-hero .eyebrow{ color:rgba(255,255,255,.82); }
.page-hero h1{
  font-family:"Sora","Manrope",sans-serif;
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  margin:0 0 12px;
  color:#fff;
}
.page-hero p{ margin:0; max-width:62ch; color:rgba(255,255,255,.9); line-height:1.6; }

/* Konum izi — baslik serisinin icinde, beyaz uzerinde. */
.page-hero .iz{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:0;
  list-style:none;
  font-size:.84rem;
  color:rgba(255,255,255,.72);
}
.page-hero .iz a{ color:rgba(255,255,255,.9); font-weight:600; }
.page-hero .iz a:hover{ text-decoration:underline; color:#fff; }
.page-hero .iz li + li::before{ content:"/"; margin-right:8px; opacity:.5; }

.legal-section{ padding:44px 0 70px; }
.legal-card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--kose-lg);
  padding:34px 36px;
  box-shadow:var(--golge-sm);
  color:#33415c;
  line-height:1.75;
}
.legal-card h2{
  font-family:"Sora","Manrope",sans-serif;
  font-size:1.15rem;
  color:var(--ink-soft);
  margin:32px 0 12px;
  padding-top:4px;
}
.legal-card h2:first-child{ margin-top:0; }
.legal-card h3{ font-size:1rem; color:var(--ink-soft); margin:22px 0 8px; }
.legal-card p{ margin:0 0 12px; }
.legal-card ul,
.legal-card ol{ margin:0 0 14px; padding-left:22px; }
.legal-card li{ margin:6px 0; }
.legal-card a{ color:var(--primary); font-weight:600; }
.legal-card a:hover{ text-decoration:underline; }
.legal-card a.btn{ color:var(--primary-dark); }
.legal-card a.btn-primary{ color:#fff; }

.legal-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid var(--stroke);
}
.legal-meta span{
  padding:6px 13px;
  border-radius:999px;
  background:#f0f5ff;
  border:1px solid rgba(31,102,209,.15);
  font-size:.82rem;
  font-weight:600;
  color:var(--primary-dark);
}

.legal-callout{
  margin:18px 0;
  padding:16px 18px;
  border-radius:var(--kose);
  background:#f0f5ff;
  border-left:4px solid var(--primary);
  color:#33415c;
  font-size:.93rem;
}
.legal-callout strong{ color:var(--ink-soft); }

/* Yasal metin yan menusu */
.legal-aside{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  padding:18px;
  box-shadow:var(--golge-sm);
  position:sticky;
  top:100px;
}
.legal-aside h2{
  margin:0 0 12px;
  font-family:"Manrope","Segoe UI",sans-serif;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.legal-aside ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.legal-aside a{
  display:block;
  padding:9px 11px;
  border-radius:var(--kose-sm);
  font-size:.9rem;
  font-weight:600;
  color:var(--muted);
  line-height:1.4;
}
.legal-aside a:hover{ background:#f3f7ff; color:var(--primary-dark); }
.legal-aside a.aktif{
  background:#eaf2ff;
  color:var(--primary-dark);
  box-shadow:inset 3px 0 0 var(--primary);
}

.info-table{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.94rem; }
.info-table th,
.info-table td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--stroke);
  vertical-align:top;
}
.info-table th{ width:36%; font-weight:700; color:var(--ink-soft); background:#f7faff; }
.table-scroll{ overflow-x:auto; }

@media (max-width: 991px){
  .legal-aside{ position:static; margin-bottom:20px; }
}
@media (max-width: 980px){
  .legal-card{ padding:24px 20px; }
}


/* ============================================================
   7) KART / ROZET / BILGI KUTUSU
   ============================================================ */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  box-shadow:var(--golge-sm);
}
/* Yukseltilmis kart. Eskiden bu kural uc bolumde (contact, services,
   siparislerim-sec) ayri ayri ve FARKLI yaricapla yaziliyordu; bolum
   stilleri ortak dosyadan SONRA yuklendigi icin hangisi gecerli olacagi
   sayfaya gore degisiyordu. Tanim artik yalnizca burada. */
.kt-card-elev{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-xl);
  box-shadow:var(--golge-sm);
}

/* Yumusak mavi yuzey — vurgulanmis bilgi kutulari. */
.kt-soft{
  background:rgba(31,102,209,.06);
  border:1px solid rgba(31,102,209,.15);
  border-radius:var(--kose-md);
}

/* Bolum girislerinde kullanilan yumusak beliriş. */
@keyframes kt-fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.kt-animate-in{ animation:kt-fade-up .75s ease both; }

.tp-kart{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  box-shadow:var(--golge-sm);
  padding:22px;
}
.tp-kart-bas{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.tp-kart-bas h2,
.tp-kart-bas h3{
  margin:0;
  font-size:1.04rem;
  font-family:"Sora","Manrope",sans-serif;
  color:var(--ink-soft);
}

.tp-ikon{
  width:44px; height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f0f5ff;
  border:1px solid rgba(31,102,209,.18);
  color:var(--primary);
  flex:0 0 auto;
}
.tp-ikon svg{ width:21px; height:21px; }
.kt-icon-box{
  width:44px; height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f0f5ff;
  border:1px solid rgba(31,102,209,.18);
  color:var(--primary);
}
/* Simgeler satir ici SVG (app/partials/hizmet-ikon.php); olcu
   kutudan verilir, yazi tipi boyutundan degil. */
.kt-icon-box svg{ width:22px; height:22px; }

/* Rozetler — tek olcu, her yerde ayni. */
.badge,
.tp-rozet{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.tp-rozet-mavi,
.kt-badge-soft{
  background:rgba(31,102,209,.1);
  border:1px solid rgba(31,102,209,.2);
  color:var(--primary-dark);
}
/* Yesil yazi --ok (#17875b) bu zeminde 4,08:1 kaliyordu (WCAG AA 4,5);
   .alert-success'in yesiliyle 6,48:1. */
.tp-rozet-yesil{ background:var(--ok-bg); border:1px solid rgba(23,135,91,.22); color:#0f6446; }
.tp-rozet-sari{ background:var(--uyari-bg); border:1px solid rgba(154,98,0,.22); color:var(--uyari); }
.tp-rozet-kirmizi{ background:var(--hata-bg); border:1px solid rgba(194,51,77,.22); color:var(--hata); }
.tp-rozet-gri{ background:#f1f4f9; border:1px solid var(--stroke); color:var(--muted); }
.kt-badge-warm{ background:rgba(70,210,255,.18); border:1px solid rgba(70,210,255,.35); color:#0b3a66; }

/* Uyari / bilgi seridi — Bootstrap .alert govdesi. */
.alert{
  border-radius:var(--kose-md);
  border:1px solid var(--stroke);
  padding:14px 18px;
  font-size:.94rem;
  line-height:1.6;
}
/* Kapatma dugmesi metnin uzerine binmesin: Bootstrap'in kendi
   padding-right:3rem kurali ile ayni ozgullukte oldugumuz ve bu dosya
   SONRA yuklendigi icin onun dolgusunu eziyorduk. */
.alert-dismissible{ padding-right:3rem; }
.alert-dismissible .btn-close{ padding:1.1rem 1.15rem; }
.alert-success{ background:var(--ok-bg); border-color:rgba(23,135,91,.2); color:#0f6446; }
.alert-warning{ background:var(--uyari-bg); border-color:rgba(154,98,0,.2); color:#7a4a00; }
.alert-danger{ background:var(--hata-bg); border-color:rgba(194,51,77,.2); color:#9c2740; }
.alert-info,
.alert-primary{ background:#f0f5ff; border-color:rgba(31,102,209,.2); color:var(--primary-dark); }

/* Bos durum — "henuz sipariş yok" gibi ekranlar her yerde ayni. */
.tp-bos{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:6px;
  padding:52px 24px;
  background:var(--card);
  border:1px dashed rgba(31,102,209,.28);
  border-radius:var(--kose-lg);
}
.tp-bos .tp-ikon{
  width:60px; height:60px;
  border-radius:18px;
  margin-bottom:8px;
}
.tp-bos .tp-ikon svg{ width:28px; height:28px; }
.tp-bos h2,
.tp-bos h3{ margin:0; font-size:1.1rem; color:var(--ink-soft); }
.tp-bos p{ margin:0 0 6px; color:var(--muted); max-width:44ch; }


/* ============================================================
   8) FORMLAR
   ============================================================ */
.form-label,
.tp-etiket{
  display:block;
  margin-bottom:6px;
  font-size:.86rem;
  font-weight:700;
  color:var(--ink-soft);
}

.form-control,
.form-select{
  border-radius:var(--kose);
  border:1px solid rgba(13,34,65,.16);
  padding:11px 14px;
  font-size:.96rem;
  color:var(--ink);
  background-color:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
/* Acilir kutunun ok simgesine yer birakilir.
   Bootstrap .form-select'e 2.25rem sag dolgu veriyor; chevron
   background-image olarak o bosluga ciziliyor. Yukaridaki ortak kural
   sag dolguyu 14px'e dusurunce uzun ilce adlari ("Mustafakemalpasa")
   okun uzerine biniyordu. */
.form-select{ padding-right:2.4rem; }
/* Devre disi kutuda arka plan rengini degistirmek background kisa
   yazimiyla yapilirsa chevron da silinir; yalnizca renk degistirilir. */
.form-control:disabled,
.form-select:disabled{ background-color:#f4f6fa; color:var(--muted); }
.form-control:focus,
.form-select:focus{
  border-color:rgba(31,102,209,.45);
  box-shadow:0 0 0 .22rem rgba(31,102,209,.15);
}
.form-control::placeholder{ color:#9aa6bb; }

.form-text,
.tp-ipucu{
  display:block;
  margin-top:5px;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.5;
}

.form-check-input{ border-color:rgba(13,34,65,.28); }
.form-control.is-invalid,
.form-select.is-invalid{ border-color:rgba(194,51,77,.6); }
.invalid-feedback{ color:var(--hata); font-size:.82rem; font-weight:600; }

/* Alan izgarasi — form satirlari her sayfada ayni araliga oturur. */
.tp-alanlar{ display:grid; gap:16px; }
.tp-alanlar-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.tp-alanlar-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.tp-alan-tam{ grid-column:1 / -1; }
@media (max-width: 760px){
  .tp-alanlar-2,
  .tp-alanlar-3{ grid-template-columns:1fr; }
}


/* ============================================================
   9) MODAL / CEKMECE (Bootstrap)
   ============================================================ */
.modal-content{
  border:0;
  border-radius:var(--kose-xl);
  overflow:hidden;
  box-shadow:var(--golge-lg);
}
.modal-header{
  background:linear-gradient(180deg,#eaf2ff 0%,#f7fbff 100%);
  border-bottom:1px solid var(--stroke);
  padding:18px 22px;
}
.modal-title{
  font-family:"Sora","Manrope",sans-serif;
  font-size:1.08rem;
  font-weight:700;
  color:var(--ink-soft);
}
.modal-body{ padding:22px; }
.modal-footer{ border-top:1px solid var(--stroke); padding:16px 22px; gap:10px; }

.offcanvas{ border:0; }
.offcanvas-header{ border-bottom:1px solid var(--stroke); padding:16px 18px; }
.offcanvas-title{ font-family:"Sora","Manrope",sans-serif; font-weight:700; color:var(--ink-soft); }

/* Giris / kayit ekraninda bolucu: "veya telefon ile" */
.tp-ayirici{
  display:flex;
  align-items:center;
  gap:.85rem;
  color:var(--muted);
  font-size:.88rem;
  font-weight:600;
}
.tp-ayirici::before,
.tp-ayirici::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--stroke);
}


/* ============================================================
   10) HESAP SAYFASI
   Sol sutun gezinti, sag sutun icerik. temizle.pro'nun kart ve
   olcu dilini kullanir.
   ============================================================ */
.hesap-duzen{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:26px;
  align-items:start;
}

.hesap-yan{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  box-shadow:var(--golge-sm);
  padding:16px;
  position:sticky;
  top:100px;
}
.hesap-kimlik{
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 4px 16px;
  margin-bottom:12px;
  border-bottom:1px solid var(--stroke);
}
.hesap-avatar{
  width:46px; height:46px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff;
  font-family:"Sora","Manrope",sans-serif;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.02em;
}
.hesap-kimlik-ad{
  min-width:0;
  line-height:1.35;
}
.hesap-kimlik-ad strong{
  display:block;
  font-size:.96rem;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hesap-kimlik-ad span{ display:block; font-size:.84rem; color:var(--muted); }

.hesap-menu-liste{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.hesap-menu-liste a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border-radius:var(--kose-sm);
  font-size:.93rem;
  font-weight:600;
  color:var(--muted);
}
.hesap-menu-liste a:hover{ background:#f3f7ff; color:var(--primary-dark); }
.hesap-menu-liste a.aktif{
  background:#eaf2ff;
  color:var(--primary-dark);
  box-shadow:inset 3px 0 0 var(--primary);
}
.hesap-menu-liste a.cikis{ color:var(--hata); }
.hesap-menu-liste a.cikis:hover{ background:var(--hata-bg); color:var(--hata); }
.hesap-menu-liste svg{ width:18px; height:18px; flex:0 0 auto; opacity:.8; }

.hesap-icerik{ display:grid; gap:20px; min-width:0; }

/* Ozet sayilari */
.hesap-sayilar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
}
.hesap-sayi{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  box-shadow:var(--golge-sm);
  padding:18px;
}
.hesap-sayi .deger{
  display:block;
  font-family:"Sora","Manrope",sans-serif;
  font-size:1.7rem;
  font-weight:800;
  line-height:1.1;
  color:var(--ink);
}
.hesap-sayi .etiket{
  display:block;
  margin-top:4px;
  font-size:.84rem;
  font-weight:600;
  color:var(--muted);
}

/* Adres defteri */
.adres-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.adres-kart{
  position:relative;
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  background:#fff;
  padding:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.adres-kart:hover{
  border-color:rgba(31,102,209,.34);
  box-shadow:0 10px 24px rgba(31,102,209,.12);
  transform:translateY(-1px);
}
.adres-kart.varsayilan{
  border-color:rgba(31,102,209,.55);
  background:#f7faff;
  box-shadow:0 12px 26px rgba(31,102,209,.14);
}
.adres-kart .baslik{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  font-weight:700;
  color:var(--ink-soft);
}
.adres-kart .govde{ font-size:.9rem; color:var(--muted); line-height:1.6; }
.adres-kart .eylemler{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--stroke);
}

@media (max-width: 991px){
  .hesap-duzen{ grid-template-columns:1fr; }
  .hesap-yan{ position:static; }
  .hesap-menu-liste{
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    overflow-x:auto;
    gap:6px;
    padding-bottom:4px;
  }
  .hesap-menu-liste a{ white-space:nowrap; }
  .hesap-menu-liste a.aktif{ box-shadow:inset 0 -3px 0 var(--primary); }
}


/* ============================================================
   11) SIPARIS BILESENLERI
   Liste, durum zaman cizelgesi, suzgecler, detay.
   ============================================================ */

/* ---- Suzgec seridi ---- */
.siparis-suzgec{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  box-shadow:var(--golge-sm);
}
.siparis-suzgec .ara{
  flex:1 1 220px;
  min-width:0;
}
.suzgec-dugme{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#fff;
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.suzgec-dugme:hover{ border-color:rgba(31,102,209,.4); color:var(--primary-dark); }
.suzgec-dugme.aktif{
  background:#eaf2ff;
  border-color:rgba(31,102,209,.5);
  color:var(--primary-dark);
}
.suzgec-dugme .sayi{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(31,102,209,.14);
  color:var(--primary-dark);
  font-size:.74rem;
  font-weight:800;
}
.suzgec-dugme.aktif .sayi{ background:var(--primary); color:#fff; }

/* ---- Siparis karti ---- */
.siparis-kart{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  box-shadow:var(--golge-sm);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.siparis-kart:hover{
  border-color:rgba(31,102,209,.28);
  box-shadow:0 16px 34px rgba(13,34,65,.1);
}
.siparis-kart.vurgulu{ border-left:4px solid var(--primary); }

.siparis-bas{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:16px 20px;
  background:linear-gradient(180deg,#f7faff,#fff);
  border-bottom:1px solid var(--stroke);
}
.siparis-bas-sol{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.siparis-no{
  display:inline-block;
  font-family:"Sora","Manrope",sans-serif;
  font-size:1.02rem;
  font-weight:800;
  color:var(--ink-soft);
  line-height:1.2;
}
/* Takip kodu detay sayfasina baglanti: tiklanabilirligi gorunsun. */
a.siparis-no:hover{ color:var(--primary-dark); text-decoration:underline; }
.siparis-tarih{ display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin-top:2px; }
.siparis-govde{ padding:18px 20px; }
.siparis-alt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 20px;
  background:#f9fbff;
  border-top:1px solid var(--stroke);
}

/* Bilgi satirlari: etiket + deger */
.siparis-bilgi{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px 20px;
}
.siparis-bilgi .satir{ min-width:0; }
.siparis-bilgi .etiket{
  display:block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}
.siparis-bilgi .deger{
  display:block;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink-soft);
  line-height:1.5;
  word-break:break-word;
}

/* ---- Durum zaman cizelgesi ----
   Siparisin nerede oldugunu tek bakista gosterir: tamamlanan adim
   dolu, simdiki adim halkali, gelecek adim soluk. */
.durum-cizelge{
  display:flex;
  align-items:flex-start;
  gap:0;
  margin:18px 0 4px;
  padding:0;
  list-style:none;
}
.durum-adim{
  position:relative;
  flex:1 1 0;
  min-width:0;
  padding-top:30px;
  text-align:center;
  font-size:.8rem;
  font-weight:600;
  color:var(--muted);
  line-height:1.35;
}
/* Baglanti cizgisi */
.durum-adim::before{
  content:"";
  position:absolute;
  top:9px;
  left:-50%;
  width:100%;
  height:2px;
  background:var(--stroke);
}
.durum-adim:first-child::before{ display:none; }
/* Nokta */
.durum-adim::after{
  content:"";
  position:absolute;
  top:3px;
  left:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--stroke);
  box-sizing:border-box;
}
.durum-adim.tamam{ color:var(--primary-dark); }
.durum-adim.tamam::after{ background:var(--primary); border-color:var(--primary); }
.durum-adim.tamam::before{ background:var(--primary); }
.durum-adim.simdi{ color:var(--primary-dark); font-weight:800; }
.durum-adim.simdi::after{
  background:#fff;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(31,102,209,.18);
}
.durum-adim.iptal{ color:var(--hata); }
.durum-adim.iptal::after{ background:var(--hata); border-color:var(--hata); }
.durum-adim .an{
  display:block;
  margin-top:3px;
  font-size:.72rem;
  font-weight:600;
  color:var(--muted);
}

@media (max-width: 620px){
  /* Dar ekranda dikey: adim adlari yan yana sigmaz. */
  .durum-cizelge{ flex-direction:column; gap:14px; }
  .durum-adim{
    flex:none;
    padding:0 0 0 30px;
    text-align:left;
  }
  .durum-adim::before{
    top:-14px;
    left:6px;
    width:2px;
    height:14px;
  }
  .durum-adim::after{ top:1px; left:0; transform:none; }
}

/* ---- Mesajlasma ---- */
.mesaj-liste{
  display:grid;
  gap:10px;
  max-height:min(380px, 52vh);
  overflow-y:auto;
  padding:4px;
}
.mesaj{
  max-width:82%;
  padding:11px 14px;
  border-radius:var(--kose-md);
  font-size:.92rem;
  line-height:1.55;
}
.mesaj .an{
  display:block;
  margin-top:5px;
  font-size:.72rem;
  font-weight:600;
  opacity:.65;
}
.mesaj.benden{
  justify-self:end;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff;
  border-bottom-right-radius:4px;
}
.mesaj.firmadan{
  justify-self:start;
  background:#f1f5fc;
  border:1px solid var(--stroke);
  color:var(--ink-soft);
  border-bottom-left-radius:4px;
}

/* ---- Fiyat dokumu ---- */
.fiyat-dokum{ width:100%; border-collapse:collapse; font-size:.93rem; }
.fiyat-dokum th,
.fiyat-dokum td{
  padding:10px 12px;
  border-bottom:1px solid var(--stroke);
  text-align:left;
  vertical-align:top;
}
.fiyat-dokum th{ font-weight:700; color:var(--muted); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
.fiyat-dokum td.sayi{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fiyat-dokum th.sayi{ text-align:right; }
/* Ozet satirlarinin etiketi satir basligidir (th scope=row); gorunusu
   hucreyle ayni, sutun basligi gibi buyuk harf ve soluk degil. */
.fiyat-dokum tbody th{ font-size:inherit; font-weight:inherit; color:inherit; letter-spacing:normal; text-transform:none; }
.fiyat-dokum tr.toplam th,
.fiyat-dokum tr.toplam td{
  border-bottom:0;
  border-top:2px solid var(--stroke);
  font-family:"Sora","Manrope",sans-serif;
  font-size:1.05rem;
  font-weight:800;
  color:var(--ink);
  padding-top:14px;
}

/* ---- Siparis takip (siparis-takip.php) ---- */
/* Rozetler .tp-eylemler'e konmaz: yazdirmada o sinif gizleniyor ve
   siparisin durumu kagitta kayboluyordu. */
.takip-rozetler{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* iOS Safari 16px'ten kucuk alana dokununca sayfayi yakinlastiriyor;
   odak halkasi da beyaz zeminde zor seciliyordu (1,24:1). */
@media (max-width: 600px){
  .takip-form .form-control{ font-size:16px; }
}
.takip-form .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,102,209,.35); }
@media print{
  .takip-sorgu,
  .takip-not{ display:none !important; }
  .takip-kart .siparis-alt{ display:flex !important; }
  .takip-kart .siparis-alt .btn{ display:none !important; }
  .takip-kart .durum-adim::before,
  .takip-kart .durum-adim::after,
  .takip-kart .tp-rozet{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* Bolumun 70px alt dolgusu sayfaya sigmayinca Chrome karti butunuyle
     2. sayfaya atiyor, 1. sayfada yalnizca baslik kaliyordu. Beyaz baslik
     yazisi da arka plansiz baskida soluk griye donuyordu. Yalnizca sonuc
     kartli sayfa: diger sayfalarin baskisi degismez. */
  .page-hero:has(+ .legal-section .takip-kart){ padding:0 0 12px; background:none; }
  .page-hero:has(+ .legal-section .takip-kart) :is(h1, p, .eyebrow, .iz, .iz a){ color:#000 !important; }
  .legal-section:has(.takip-kart){ padding:12px 0 0; }
}

/* ---- Siparis degerlendirme (siparis-takip.php?…-d) ---- */
/* Sutun minmax(0,1fr): ogeler min-content'e buyumesin. Ortuk "auto" sutun
   tek satirlik uzun bir metinle karti telefonda ekrandan tasiriyordu. */
.deg-sayfa{ max-width:640px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.deg-sayfa > .tp-bos,
.deg-sayfa > .alert{ margin:0; }
.deg-not{ margin:0; font-size:.9rem; color:var(--muted); }
.deg-orta{ text-align:center; }
.deg-istege{ font-weight:500; color:var(--muted); }
.deg-kucuk{ font-size:.85rem; color:var(--muted); }
.deg-ikincil{ margin-top:14px; gap:6px; }
.deg-ikincil form{ margin:0; }
/* Uzun dugme yazilari ("Hesabımı Aç ve Yorumumu Yayınla") 320 px'te tek
   satira sigmaz; .btn'in white-space:nowrap'i burada kalkar. */
.deg-sayfa .tp-eylemler > .btn{ white-space:normal; text-align:center; }
@media (max-width: 760px){
  .deg-form.tp-alanlar-2{ grid-template-columns:minmax(0,1fr); }
}
/* Kosullar basligi: kayit penceresindeki bag gibi satir icinde akar. */
.deg-metin-baglanti{ color:var(--primary-dark); text-decoration:underline; }
/* Yildiz secici: radyolar gorunmez ama odaklanabilir (display:none
   klavyeyi ve "zorunlu alan" uyarisini kapatirdi). Doluluk JS'in
   yazdigi data-deger / data-onizle ile boyanir; JS yoksa yalnizca secili
   yildiz boyanir. Sira dogal (1..5): ok tuslari beklenen yone gider. */
.yildiz-sec{ border:0; margin:0; padding:0; min-width:0; }
.yildiz-sec legend{ float:none; width:auto; margin:0 0 6px; padding:0; font-size:.92rem; font-weight:700; color:var(--ink); }
.yildizlar{ position:relative; display:flex; flex-wrap:wrap; gap:2px; }
.yildizlar input{
  position:absolute; left:0; bottom:0; width:1px; height:1px; margin:0; padding:0;
  opacity:0; overflow:hidden; clip-path:inset(50%);
}
/* Bos yildiz ici bos (kontur #8a94a6, beyazda 3,1:1), dolu yildiz koyu
   konturlu sari: durum yalnizca renkle degil bicimle de ayrilir (WCAG 1.4.11). */
.yildizlar label{
  display:inline-grid; place-items:center; width:48px; height:48px;
  font-size:2.2rem; line-height:1; color:transparent; -webkit-text-stroke:1.5px #8a94a6; cursor:pointer;
  border-radius:12px; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:color .12s ease, transform .12s ease;
}
.yildizlar label:hover{ transform:scale(1.08); }
.yildizlar input:focus-visible + label{ outline:3px solid var(--primary); outline-offset:2px; }
.yildizlar input:checked + label,
.yildizlar[data-deger="1"] label:nth-of-type(-n+1),
.yildizlar[data-deger="2"] label:nth-of-type(-n+2),
.yildizlar[data-deger="3"] label:nth-of-type(-n+3),
.yildizlar[data-deger="4"] label:nth-of-type(-n+4),
.yildizlar[data-deger="5"] label:nth-of-type(-n+5){ color:#f5b50a; -webkit-text-stroke:1px #a66f00; }
/* Fareyle onizleme secimi ezer (ayni ozgulluk, sonra gelir). */
.yildizlar[data-onizle] label:nth-of-type(n){ color:transparent; -webkit-text-stroke:1.5px #8a94a6; }
.yildizlar[data-onizle="1"] label:nth-of-type(-n+1),
.yildizlar[data-onizle="2"] label:nth-of-type(-n+2),
.yildizlar[data-onizle="3"] label:nth-of-type(-n+3),
.yildizlar[data-onizle="4"] label:nth-of-type(-n+4),
.yildizlar[data-onizle="5"] label:nth-of-type(-n+5){ color:#f5b50a; -webkit-text-stroke:1px #a66f00; }
.yildiz-yazi{ margin:4px 0 0; min-height:1.4em; font-size:.88rem; font-weight:700; color:var(--muted); }
/* Salt okunur yildizlar (tesekkur / yayinda ekrani) */
.deg-puan{ margin:6px 0 0; }
.deg-yildizlar{ display:inline-flex; gap:2px; font-size:1.5rem; line-height:1; }
.deg-yildizlar .dolu{ color:#f5b50a; -webkit-text-stroke:1px #a66f00; }
.deg-yildizlar .bos{ color:transparent; -webkit-text-stroke:1.5px #8a94a6; }
.deg-alinti{
  margin:14px auto 0; max-width:520px; padding:12px 16px; text-align:left; overflow-wrap:anywhere;
  border-left:3px solid var(--stroke); border-radius:0 var(--kose) var(--kose) 0;
  background:#f7f9fd; color:var(--ink-soft); font-size:.95rem; line-height:1.6;
}
.deg-sabit{
  margin:0; padding:10px 12px; border:1px solid var(--stroke); border-radius:var(--kose);
  background:#f7f9fd; font-weight:700; color:var(--ink-soft);
}
.deg-ok{ font-weight:600; color:#0f6446; }   /* --ok bu zeminde 4,3:1 */
.deg-kod{ max-width:220px; font-size:1.35rem; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums; }
.deg-form .form-control:focus,
.deg-form .form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,102,209,.35); }
/* Hatali alan odakta da kirmizi kalir (autofocus ile acilir). */
.deg-form .form-control.is-invalid:focus,
.deg-form .form-select.is-invalid:focus{ border-color:var(--hata); box-shadow:0 0 0 3px rgba(194,51,77,.25); }
@media (max-width: 600px){
  .deg-form .form-control,
  .deg-form .form-select{ font-size:16px; }
  .deg-form .deg-kod{ font-size:1.35rem; }   /* 16px'ten buyuk: iOS yakinlastirmasi yine olmaz */
  .yildizlar label{ width:44px; height:44px; font-size:2rem; }
}

/* ---- Sihirbaz adim gostergesi (siparis olusturma) ---- */
.sihirbaz-adimlar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 22px;
  padding:0;
  list-style:none;
}
.sihirbaz-adim{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  color:rgba(255,255,255,.82);
  font-size:.85rem;
  font-weight:700;
}
.sihirbaz-adim .sira{
  display:grid;
  place-items:center;
  width:20px; height:20px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  font-size:.74rem;
  font-weight:800;
}
.sihirbaz-adim.aktif{
  background:#fff;
  border-color:#fff;
  color:var(--primary-dark);
}
.sihirbaz-adim.aktif .sira{ background:var(--primary); color:#fff; }
.sihirbaz-adim.tamam .sira{ background:#3ddc97; color:#07351f; }

/* Acik zeminde kullanilirsa */
.sihirbaz-adimlar.acik .sihirbaz-adim{
  background:#fff;
  border-color:var(--stroke);
  color:var(--muted);
}
.sihirbaz-adimlar.acik .sihirbaz-adim .sira{ background:#e9eef7; color:var(--muted); }
.sihirbaz-adimlar.acik .sihirbaz-adim.aktif{
  background:#eaf2ff;
  border-color:rgba(31,102,209,.45);
  color:var(--primary-dark);
}
.sihirbaz-adimlar.acik .sihirbaz-adim.aktif .sira{ background:var(--primary); color:#fff; }
.sihirbaz-adimlar.acik .sihirbaz-adim.tamam .sira{ background:#3ddc97; color:#07351f; }
.sihirbaz-adimlar.deg-adimlar{ margin-bottom:18px; }


/* ============================================================
   12) YUZEN ILETISIM DUGMELERI
   temizle.pro ile ayni konum ve olcu.
   ============================================================ */
.floating-contacts{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1400;
}
.floating-btn{
  width:52px; height:52px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 14px 28px rgba(11,26,56,.18);
  border:1px solid rgba(255,255,255,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.floating-btn svg{ width:26px; height:26px; }
.floating-btn:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(11,26,56,.25);
}
.floating-btn.whatsapp{ background:#25D366; }
.floating-btn.phone{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }

@media (max-width: 600px){
  .floating-contacts{ right:14px; bottom:14px; }
  .floating-btn{ width:48px; height:48px; border-radius:14px; }
  .floating-btn svg{ width:24px; height:24px; }
}


/* ============================================================
   13) DAR EKRAN ORTAK KURALLARI
   temizle.pro: <=600px'te eylem dugmeleri tam genislik.
   ============================================================ */
@media (max-width: 600px){
  :root{ --bolum-dolgu:48px; }

  .tp-eylemler > .btn,
  .siparis-alt > .btn,
  .siparis-alt .tp-eylemler > .btn{
    width:100%;
    justify-content:center;
  }
  .tp-eylemler{ width:100%; }

  .siparis-bas,
  .siparis-govde,
  .siparis-alt{ padding-inline:16px; }

  .tp-kart{ padding:18px; }
  .modal-body{ padding:18px; }
  .page-hero{ padding:40px 0 36px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,
  .siparis-kart:hover,
  .adres-kart:hover,
  .floating-btn:hover{ transform:none; }
}

/* Yazdirma: gezinti ve eylemler cikmaz, metin siyah. */
@media print{
  .site-header,
  .site-footer,
  .floating-contacts,
  .tp-eylemler,
  .siparis-alt,
  .siparis-suzgec{ display:none !important; }
  body{ background:#fff; color:#000; }
  .siparis-kart,
  .tp-kart,
  .legal-card{ box-shadow:none; border-color:#ccc; }
}


/* ============================================================
   14) PROFIL KUTUSU VE GIRIS BILESENLERI
   ------------------------------------------------------------
   Bu kurallar navbar.php'nin <style> blogundan geliyordu. O blok
   kaldirilirken buraya tasinmalari atlanmisti; modal ve giris
   kutusu hala kullanildigi icin (hesap.php'den "Google Hesabı
   Bağla", navbar.php'deki profil/adres yonetimi) stilsiz kaliyordu.

   NOT: Hesap yonetiminin kalici adresi artik /hesap.php. Modal
   yalnizca siparis akisi sirasinda hizli adres secimi ve Google
   baglama icin duruyor.
   ============================================================ */

/* Giris kutusundaki "veya telefon ile" bolucusu */
.kt-auth-sep{
  display:flex;
  align-items:center;
  gap:.85rem;
  color:var(--muted);
  font-size:.92rem;
}
.kt-auth-sep::before,
.kt-auth-sep::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--stroke);
}

/* Google dugmesinin yerlestigi kutu; dugme gelmeden once yuksekligi
   korur ki icerik zipladigini hissettirmesin. */
.kt-google-slot{ min-height:44px; }
.kt-google-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  width:100%;
  min-height:44px;
  border:1px solid rgba(15,23,42,.16);
  border-radius:var(--kose);
  background:#fff;
  color:#334155;
  font-weight:600;
}

/* ---- Profil / adres kutusu ---- */
#ktProfileModal .modal-dialog{ max-width:920px; }
#ktProfileModal .modal-body{ background:#f4f7fb; }
#ktProfileModal .form-label{ font-weight:600; color:#334155; }

#ktProfileModal .kt-profile-stack{ display:grid; gap:.9rem; }
#ktProfileModal .kt-profile-section{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--kose-md);
  padding:1rem;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
#ktProfileModal .kt-profile-section-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem;
  font-weight:700;
  color:var(--ink-soft);
}
#ktProfileModal .kt-profile-phone{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.28rem .68rem;
  border-radius:999px;
  background:rgba(31,102,209,.08);
  border:1px solid rgba(31,102,209,.16);
  color:var(--primary-dark);
  font-size:.84rem;
  font-weight:600;
}
#ktProfileModal #ktAddressEditHint{
  margin-bottom:.75rem !important;
  padding:.65rem .75rem;
  border:1px dashed rgba(31,102,209,.24);
  border-radius:var(--kose);
  background:rgba(31,102,209,.06);
}
#ktProfileModal #ktAddressEditWrap,
#ktProfileModal #ktAddressAddCollapse{
  margin-bottom:.8rem;
  padding:.85rem;
  border:1px solid rgba(31,102,209,.14);
  border-radius:var(--kose-md);
  background:#f8fbff;
}
#ktProfileModal .kt-address-card{
  padding:.72rem;
  border:1px solid var(--stroke);
  border-radius:var(--kose);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#ktProfileModal .kt-address-card:hover{
  border-color:rgba(31,102,209,.34);
  box-shadow:0 10px 24px rgba(31,102,209,.12);
  transform:translateY(-1px);
}
#ktProfileModal .kt-address-card.border-primary,
#ktProfileModal .kt-address-card.bg-light{
  border-color:rgba(31,102,209,.6) !important;
  background:#edf4ff !important;
  box-shadow:0 12px 26px rgba(31,102,209,.16);
}

@media (max-width: 767px){
  #ktProfileModal .modal-dialog{ margin:.5rem; }
  #ktProfileModal .kt-profile-section{ padding:.85rem; }
}


/* ============================================================
   15) ANA SAYFA
   ------------------------------------------------------------
   Kahraman bolumu, siparis karti, hizmet kartlari, kesfet, surec
   ve iletisim.

   NEDEN BURADA: bu kurallar daha once BES ayri partial'in <style>
   blogundaydi (hero_register.php, services.php, process.php,
   contact.php, kesfet.php). Ayni secici birkac yerde farkli
   degerle taniliydi ve hangisinin kazanacagi, bolumlerin sayfaya
   eklenme sirasina bagliydi. Tek dosyada toplanmasi bu belirsizligi
   bitirir; anasayfa da sitenin geri kalaniyla ayni kalibi kullanir.
   ============================================================ */

/* ------------------------------------------------------------
   15.1 KAHRAMAN
   ------------------------------------------------------------ */
.kt-hero-main{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#0d357f 0%,#1a5cc4 46%,#3f9ef2 100%);
}
.kt-hero-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 300px at 12% 16%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(520px 320px at 90% 70%, rgba(4,26,72,.34), transparent 70%);
  pointer-events:none;
}
.kt-hero-main > .container{
  position:relative;
  z-index:1;
  padding-top:clamp(42px, 5vw, 68px);
  padding-bottom:clamp(42px, 5vw, 68px);
}

/* Mavi zeminde baslik rengi.
   DIKKAT — kural METIN SUTUNUNU hedefler, bolumun tamamini degil.
   Dosyanin basindaki h1..h6 kurali rengi var(--ink-soft) yapiyor ve
   .kt-hero-main'den kalitimla gelen beyazi EZIYOR; baslik mavi zeminde
   neredeyse siyah cikiyor, kontrast orani ~2.6:1'e dusuyordu (WCAG AA
   buyuk yazi icin 3:1 ister). Ayni bolumun icindeki siparis karti BEYAZ
   zeminlidir; onun yazilari koyu kalmali, bu yuzden kural .kt-hero-copy
   ile sinirlanir. */
.kt-hero-copy h1,
.kt-hero-copy h2{ color:#fff; }
.kt-hero-copy .lead{ color:rgba(255,255,255,.92); }
.kt-hero-copy .text-secondary{ color:rgba(255,255,255,.84) !important; }
.kt-hero-copy strong{ color:#fff; font-weight:700; }

.kt-hero-baslik{
  font-size:clamp(2rem, 3.5vw, 2.9rem);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.03em;
  margin:0 0 16px;
  max-width:18ch;
}
.kt-hero-ozet{
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  line-height:1.6;
  margin:0 0 20px;
  max-width:52ch;
  color:rgba(255,255,255,.92);
}

/* Hizmet akisini tek satirda anlatan ok dizisi. Daha once duz metinde
   ok yerine iki noktalama isareti yaziyordu; ekran okuyucu bunlari
   harf harf okuyordu. Artik liste ogeleri ayri, ok yalnizca susleme. */
.kt-hero-akis{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin:0 0 22px;
  padding:0;
  list-style:none;
  font-size:.95rem;
  font-weight:600;
  color:rgba(255,255,255,.92);
}
.kt-hero-akis li{ display:flex; align-items:center; gap:10px; }
.kt-hero-akis li:not(:last-child)::after{
  content:"";
  width:15px;
  height:9px;
  background:currentColor;
  opacity:.5;
  clip-path:polygon(0 36%, 60% 36%, 60% 0, 100% 50%, 60% 100%, 60% 64%, 0 64%);
}

/* Rozetler — mavi zemin uzerinde cam hap. */
.kt-hero-main .kt-badge-soft,
.kt-hero-main .kt-badge-warm{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
}

/* Hizmet verilen bolge notu. Platform Turkiye geneli icin kuruldu, su
   an yalnizca Bursa acik. Bu ayrim musteriye ACIKCA soylenir ki baska
   ilden gelen ziyaretci bos firma listesiyle karsilasip sitenin bozuk
   oldugunu dusunmesin. */
.kt-hero-bolge{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:12px 16px;
  border-radius:var(--kose-md);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  font-size:.9rem;
  line-height:1.55;
  color:rgba(255,255,255,.92);
  max-width:48ch;
}
.kt-hero-bolge svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; }

@media (max-width: 991.98px){
  .kt-hero-copy{ margin-top:28px; }
  .kt-hero-baslik{ max-width:none; }
}

/* ------------------------------------------------------------
   15.2 SIPARIS KARTI (kahramanin yanindaki kutu)
   ------------------------------------------------------------ */
.kt-order-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--kose-xl);
  box-shadow:0 26px 60px rgba(6,24,60,.26);
  overflow:hidden;
}
.kt-order-govde{ padding:18px; }

.kt-order-bas{
  padding:16px 18px 14px;
  background:linear-gradient(180deg,#eef4ff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--stroke);
}
.kt-order-bas-ust{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.kt-order-etiket{
  display:block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:5px;
}
.kt-order-baslik{
  margin:0;
  font-family:"Sora","Manrope",sans-serif;
  font-weight:700;
  font-size:1.08rem;
  letter-spacing:-.015em;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kt-order-adim{
  margin:5px 0 0;
  font-size:.84rem;
  font-weight:500;
  color:var(--muted);
}
.kt-order-guven{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--stroke);
  font-size:.74rem;
  font-weight:700;
  color:var(--ink-soft);
}
.kt-order-guven svg{ width:14px; height:14px; color:var(--primary); }

.kt-order-bar{
  margin-top:12px;
  height:5px;
  border-radius:999px;
  background:rgba(13,34,65,.09);
  overflow:hidden;
}
.kt-order-bar > span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  transition:width .4s ease;
}
/* Bootstrap .progress kullanan adimlar ayni gorunsun. */

/* ---- Hizmet secim izgarasi ---- */
.kt-service-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  max-height:700px;
  opacity:1;
  overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease;
}
.kt-service-grid.kt-picked{
  max-height:0;
  opacity:0;
  pointer-events:none;
  margin:0;
}
.kt-service-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  padding:12px 13px;
  border-radius:var(--kose);
  border:1px solid var(--stroke);
  background:#fff;
  font-weight:700;
  font-size:.92rem;
  line-height:1.25;
  color:var(--ink-soft);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.kt-service-btn:hover{
  border-color:rgba(31,102,209,.45);
  background:#f7faff;
  box-shadow:0 6px 16px rgba(13,34,65,.07);
}
.kt-service-btn.is-active{
  border-color:var(--primary);
  background:rgba(31,102,209,.06);
  box-shadow:0 0 0 1px var(--primary) inset;
}
.kt-service-ikon{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  flex:0 0 auto;
  border-radius:9px;
  background:#eef4ff;
  color:var(--primary);
  font-size:.95rem;
}
.kt-service-ikon svg{ width:18px; height:18px; }
.kt-service-btn.is-active .kt-service-ikon{ background:var(--primary); color:#fff; }
.kt-service-ad{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* Eski nokta isaretini kullanan yerler bozulmasin. */
.kt-service-btn .kt-dot{
  width:9px; height:9px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--primary-light);
}

.kt-order-not{
  margin:12px 2px 0;
  font-size:.8rem;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
}

/* ---- Hizli secenekler (Google ile giris + konum) ---- */
.kt-hizli{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 420px){
  .kt-hizli{ grid-template-columns:1fr; }
}
/* Google dugmesi marka kilavuzuna gore: beyaz zemin, notr kenar,
   renkli G. Daha once .btn-outline-danger idi; kirmizi cerceve
   Google'in hicbir resmi dugmesinde yoktur ve sitede "tehlikeli
   islem" anlamina gelen renk ailesini kullaniyordu. */
.kt-google-btn{
  background:#fff;
  color:#1f2937;
  border:1px solid rgba(13,34,65,.2);
  box-shadow:none;
  font-weight:600;
}
.kt-google-btn:hover,
.kt-google-btn:focus{
  background:#f7f9fc;
  color:#1f2937;
  border-color:rgba(13,34,65,.34);
  box-shadow:0 6px 16px rgba(13,34,65,.08);
}
.kt-google-btn svg{ width:17px; height:17px; flex:0 0 auto; }

/* Tam genislikteki dugmelerde yazi SARILABILIR.
   .btn uzerindeki white-space:nowrap kurali, sabit genislikteki bir
   izgara gozunde "Mevcut Konumu Kullan" gibi uzun etiketi kirpmiyor,
   kutunun DISINA tasiriyordu. Blok dugmelerde satir sonu serbest
   birakilir; dikey dolgu ve ortalama korunur. */
.btn.kt-blok{
  width:100%;
  min-width:0;
  white-space:normal;
  text-align:center;
  line-height:1.3;
}

.kt-geo-durum{
  margin-top:8px;
  min-height:1.1em;
  font-size:.82rem;
  text-align:center;
  color:var(--muted);
}
.kt-geo-durum[data-state="error"]{ color:var(--hata); }
.kt-geo-durum[data-state="ok"]{ color:var(--ok); }

/* ---- Firma secim listesi ---- */
.kt-firm-grid{ display:grid; gap:10px; }
.kt-firm-btn{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  text-align:left;
  padding:13px 14px;
  border-radius:var(--kose);
  border:1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.kt-firm-btn:hover{
  border-color:rgba(31,102,209,.42);
  box-shadow:0 6px 16px rgba(13,34,65,.07);
}
.kt-firm-btn.is-active{
  border-color:var(--primary);
  background:rgba(31,102,209,.05);
  box-shadow:0 0 0 1px var(--primary) inset;
}
.kt-firm-btn .kt-dot{
  width:11px; height:11px;
  margin-top:5px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--primary-light);
}
.kt-firm-title{
  font-weight:800;
  font-size:1rem;
  line-height:1.25;
  color:var(--ink-soft);
}
.kt-firm-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
  font-size:.84rem;
  font-weight:600;
  color:var(--muted);
}
.kt-firm-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#f7f9fc;
}
.kt-firm-btn.is-active::after{
  content:"";
  position:absolute;
  right:13px; top:13px;
  width:22px; height:22px;
  border-radius:999px;
  background:var(--primary);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* Firma listesi sabit yukseklikte kaydirilir; "Devam Et" dugmesi firma
   sayisi degisse de hep ayni yerde kalir. */
#ktFirmPickWrap{
  max-height:330px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}

.kt-firm-loading{
  position:relative;
  overflow:hidden;
  padding:18px 16px;
  text-align:center;
  border:1px dashed rgba(31,102,209,.28);
  border-radius:var(--kose);
  background:#f7faff;
}
.kt-firm-loading::after{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(31,102,209,.16), transparent);
  animation:kt-loading-sheen 1.8s ease-in-out infinite;
}
.kt-firm-loading-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:8px; }
.kt-firm-loading-dot{
  width:7px; height:7px;
  border-radius:999px;
  background:rgba(31,102,209,.7);
  animation:kt-loading-bounce .9s ease-in-out infinite;
}
.kt-firm-loading-dot:nth-child(2){ animation-delay:.15s; }
.kt-firm-loading-dot:nth-child(3){ animation-delay:.3s; }
.kt-firm-loading-title{ font-weight:700; color:var(--ink-soft); }
.kt-firm-loading-status{ margin-top:4px; min-height:1.2em; font-weight:600; color:var(--primary); }
.kt-firm-loading-sub{ margin-top:4px; font-size:.84rem; color:var(--muted); }
.kt-firm-denied{ border-color:rgba(194,51,77,.3); background:var(--hata-bg); }
.kt-firm-retry{ margin-top:10px; }

@keyframes kt-loading-sheen{
  0%{ transform:translateX(0); opacity:.1; }
  50%{ opacity:.5; }
  100%{ transform:translateX(220%); opacity:.1; }
}
@keyframes kt-loading-bounce{
  0%,100%{ transform:translateY(0); opacity:.6; }
  50%{ transform:translateY(-4px); opacity:1; }
}

/* Panelin acilis animasyonu. */
.kt-order-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .5s ease, opacity .3s ease;
}
.kt-order-panel.is-open{
  max-height:2600px;
  opacity:1;
  margin-top:12px;
}

/* Geri (dar) + Devam Et (genis) ikilisi. */
.kt-nav-2080{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
}
.kt-nav-2080 > .btn{ width:100%; margin:0; min-width:0; white-space:normal; }
.kt-nav-2080 > .btn:first-child{ padding-inline:14px; }

/* ------------------------------------------------------------
   15.3 BOLUM BASLIKLARI
   Anasayfadaki her bolum ayni giris kalibiyla acilir.
   ------------------------------------------------------------ */
.kt-bolum-bas{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.kt-bolum-bas h2{
  margin:0 0 6px;
  font-size:clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--ink-soft);
}
.kt-bolum-bas p{ margin:0; color:var(--muted); max-width:64ch; }

/* ------------------------------------------------------------
   15.4 HIZMET KARTLARI
   ------------------------------------------------------------ */
.kt-hizmet-izgara{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 900px){ .kt-hizmet-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .kt-hizmet-izgara{ grid-template-columns:1fr; } }

.kt-hizmet-kart{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px 22px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-xl);
  box-shadow:var(--golge-sm);
  color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kt-hizmet-kart:hover{
  border-color:rgba(31,102,209,.3);
  box-shadow:0 16px 34px rgba(13,34,65,.1);
  transform:translateY(-2px);
  text-decoration:none;
}
.kt-hizmet-kart .kt-icon-box{
  width:48px; height:48px;
  border-radius:14px;
  font-size:1.25rem;
}
.kt-hizmet-kart .kt-icon-box svg{
  width:26px; height:26px;
}
.kt-hizmet-kart h3{
  margin:4px 0 0;
  font-size:1.08rem;
  font-weight:700;
  color:var(--ink-soft);
}
.kt-hizmet-kart p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--muted); }
.kt-hizmet-bag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:12px;
  font-size:.88rem;
  font-weight:700;
  color:var(--primary);
}
.kt-hizmet-kart:hover .kt-hizmet-bag{ color:var(--primary-dark); }

/* ------------------------------------------------------------
   15.5 KESFET
   ------------------------------------------------------------ */
#kesfet{ background:linear-gradient(180deg, var(--bg-alt), #fff); }

/* Suzgec, bolum basliginin SAGINDA tek satir olarak durur.
   Daha once .form-select kuralindaki width:100% yuzunden iki acilir
   kutu alt alta dusuyor ve basligin yaninda 260px'lik bir sutun gibi
   yapisiyordu. */
.kesfet-filtre{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.kesfet-filtre .form-select{
  width:auto;
  min-width:150px;
  padding-top:8px;
  padding-bottom:8px;
  font-size:.9rem;
}

.kesfet-izgara{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 1050px){ .kesfet-izgara{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px){ .kesfet-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){ .kesfet-izgara{ grid-template-columns:1fr; } }

.kesfet-kart{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-lg);
  box-shadow:var(--golge-sm);
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kesfet-kart:hover{
  transform:translateY(-3px);
  border-color:rgba(31,102,209,.3);
  box-shadow:0 16px 32px rgba(13,34,65,.12);
  text-decoration:none;
}
.kesfet-kart .media{ aspect-ratio:4/3; background:#0b1b33; overflow:hidden; }
.kesfet-kart .media img,
.kesfet-kart .media video{ width:100%; height:100%; object-fit:cover; }
.kesfet-kart .media.empty{
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.5);
  font-size:1.9rem;
  background:linear-gradient(135deg, var(--primary), var(--accent));
}
.kesfet-govde{ display:flex; flex-direction:column; gap:6px; padding:14px; }
.kesfet-firma{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:.84rem;
  font-weight:700;
  color:var(--primary-dark);
}
.kesfet-kart:hover .firma-name{ text-decoration:underline; }
.kesfet-baslik{ font-weight:700; font-size:.95rem; color:var(--ink-soft); }
.kesfet-ozet{
  font-size:.88rem;
  line-height:1.55;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.kesfet-rating{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #f3d987;
  background:#fff8e6;
  font-size:.76rem;
  font-weight:700;
  color:#8a6a10;
  white-space:nowrap;
}
.kesfet-rating .star{ color:#f0ad0a; }
.kesfet-rating .count{ font-weight:500; opacity:.85; }

/* ------------------------------------------------------------
   15.6 SUREC
   ------------------------------------------------------------ */
#surec{
  background:
    radial-gradient(900px 520px at 8% 0%, rgba(31,102,209,.1), transparent 60%),
    radial-gradient(700px 420px at 92% 18%, rgba(70,210,255,.12), transparent 55%),
    linear-gradient(180deg,#f5f8ff,#fff);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.kt-adim-izgara{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-bottom:34px;
}
@media (max-width: 900px){ .kt-adim-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .kt-adim-izgara{ grid-template-columns:1fr; } }

.kt-step{
  position:relative;
  padding:22px 20px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-lg);
  box-shadow:var(--golge-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.kt-step:hover{ border-color:rgba(31,102,209,.26); box-shadow:0 12px 26px rgba(13,34,65,.09); }
.kt-step-ust{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.kt-step-no{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(31,102,209,.09);
  border:1px solid rgba(31,102,209,.25);
  color:var(--primary);
  font-weight:800;
  font-size:.88rem;
}
.kt-step-title{ font-weight:700; color:var(--ink-soft); }
.kt-step p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--muted); }

.kt-surec-duzen{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:26px;
  align-items:start;
}
@media (max-width: 900px){ .kt-surec-duzen{ grid-template-columns:1fr; } }

.kt-surec-kutu{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px;
  border-radius:var(--kose-lg);
  border:1px solid rgba(31,102,209,.18);
  background:rgba(255,255,255,.8);
}
.kt-surec-kutu + .kt-surec-kutu{ margin-top:14px; }
.kt-surec-kutu .tp-ikon{ width:40px; height:40px; }
.kt-surec-kutu strong{ display:block; margin-bottom:4px; color:var(--ink-soft); }
.kt-surec-kutu p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--muted); }

/* ------------------------------------------------------------
   15.7 ILETISIM
   ------------------------------------------------------------ */
#iletisim{ background:linear-gradient(180deg,#fff, var(--bg-alt)); }
.kt-iletisim-kart{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  padding:30px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--kose-xl);
  box-shadow:var(--golge-sm);
}
@media (max-width: 800px){
  .kt-iletisim-kart{ grid-template-columns:1fr; gap:22px; padding:24px; }
}
.kt-iletisim-eylem{ display:grid; gap:10px; align-content:start; }
.kt-iletisim-liste{
  display:grid;
  gap:13px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.92rem;
  color:var(--muted);
}
.kt-iletisim-liste li{ display:flex; align-items:flex-start; gap:11px; }
.kt-iletisim-liste svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:var(--primary); }
.kt-iletisim-liste strong{ display:block; font-weight:700; color:var(--ink-soft); }

@media (prefers-reduced-motion: reduce){
  .kt-service-grid,
  .kt-service-btn,
  .kt-order-panel,
  .kt-firm-btn,
  .kt-hizmet-kart,
  .kesfet-kart{ transition:none !important; }
  .kt-firm-loading::after,
  .kt-firm-loading-dot{ animation:none !important; }
}

/* ------------------------------------------------------------
   15.8 SIPARIS SIHIRBAZI
   Adim formlari, ozet karti, konum karti, fiyat listesi.
   Bu kurallar hero_register.php icindeki <style> blogundan geldi.
   ------------------------------------------------------------ */

/* Adim formu dikey akar; Bootstrap izgarasi yerine tek sutun.
   Dar kartta .row'un negatif gutter'i alanlari kart kenarina
   yapistiriyordu. */
.kt-adim-form{
  display:grid;
  gap:14px;
}
.kt-alan-ikili{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 400px){
  .kt-alan-ikili{ grid-template-columns:1fr; }
}
.kt-alan-baslik{
  margin:0 0 2px;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink-soft);
}
.kt-alan-ipucu{
  margin:0 0 8px;
  font-size:.84rem;
  line-height:1.5;
  color:var(--muted);
}
.kt-adres-kutu{ padding:14px 16px; }
.kt-adres-kutu .kt-addr-text{
  margin:0 0 10px;
  font-size:.9rem;
  line-height:1.55;
  color:var(--ink);
}
/* Dugme icindeki ikincil aciklama ("Bilgileri gir"). */
.kt-btn-alt{
  font-weight:500;
  font-size:.86em;
  opacity:.8;
}
/* Adim ipucu bos oldugunda satir yuksekligi kadar bosluk birakmasin. */
.kt-order-adim:empty{ display:none; }

.kt-summary-card{
  background:#f7f9fc;
  border:1px solid var(--stroke);
  border-radius:var(--kose);
  box-shadow:none;
}
.kt-summary-kicker{
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.kt-summary-title{ font-size:1rem; font-weight:700; color:var(--ink-soft); }
.kt-summary-meta{ font-weight:600; color:#16243a; }
.kt-summary-label{ font-weight:600; color:#48556d; }

.kt-finalize-form{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.kt-finalize-form .form-control,
.kt-finalize-form .form-select{ background:#fff; }
.kt-finalize-form .form-check-label{ color:var(--ink); }

.kt-geo-card{
  background:#f7f9fc;
  border:1px solid var(--stroke);
  border-radius:var(--kose);
}
.kt-map-frame{ border:0; border-radius:var(--kose); }
.kt-geo-status[data-state="error"]{ color:var(--hata); }
.kt-geo-status[data-state="ok"]{ color:var(--ok); }

.kt-price-list{ display:grid; gap:6px; margin-top:8px; }
.kt-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:.86rem;
  color:var(--muted);
}
.kt-price-row span:last-child{ font-weight:600; color:var(--ink-soft); }

.kt-divider{ height:1px; background:var(--stroke); }
.kt-muted{ color:var(--muted); }
.kt-addr-text{ color:var(--ink); }
.kt-order-card .input-group-text{
  background:#f7f9fc;
  border-color:var(--stroke);
  color:var(--muted);
}
#ktDisclaimerModal .modal-body{ color:#1f2a44; }

/* Bootstrap "yuzen etiket" alanlari (finalize sihirbazi) — etiket rengi
   govde metniyle karismasin. */
.form-floating > label{ color:var(--muted); }

/* Konum durumu bos oldugunda satir kadar bosluk birakmasin; yazi
   gelince kendi yerini acar. */
.kt-geo-durum:empty{ display:none; }

/* Iletisim bolumundeki sosyal hesap baglantilari. */
.kt-sosyal{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:7px;
}
.kt-sosyal a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#fff;
  font-size:.86rem;
  font-weight:700;
  color:var(--ink-soft);
  transition:border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.kt-sosyal a:hover{
  border-color:rgba(31,102,209,.45);
  color:var(--primary-dark);
  box-shadow:0 6px 16px rgba(13,34,65,.08);
  text-decoration:none;
}
.kt-sosyal svg{
  width:17px;
  height:17px;
  margin:0;
  flex:0 0 auto;
  color:var(--primary);
}

/* ------------------------------------------------------------
   15.9 HIZMET SIMGELERI (gorsel surum)
   ------------------------------------------------------------
   Simgeler marka sahibinin verdigi cizimlerden kirpilir
   (app/partials/hizmet-ikon.php). Cizimlerin KENDI acik mavi daire
   zemini oldugu icin arkalarindaki mavi kare kutu kaldirilir — yoksa
   zemin iki kat gorunur. Yalnizca gorseli olmayan hizmetler (su an
   ev temizligi) eski kutulu SVG cizimi kullanir. */
.kt-service-ikon.kt-ikon-gorsel,
.kt-icon-box.kt-ikon-gorsel,
.kt-hizmet-kart .kt-icon-box.kt-ikon-gorsel{
  background:none;
  border:0;
  border-radius:0;
}
.kt-service-ikon.kt-ikon-gorsel{ width:34px; height:34px; }
.kt-hizmet-kart .kt-icon-box.kt-ikon-gorsel{ width:58px; height:58px; }
.kt-ikon-gorsel picture{ display:block; width:100%; height:100%; }
.kt-ikon-gorsel img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* Secili dugmede kutu mavi dolar; gorselin arkasinda bu istenmez. */
.kt-service-btn.is-active .kt-ikon-gorsel{ background:none; }