/* ============================================================================
   TOPALOĞLU — TASARIM JETONLARI  (sürüm 2.0, logo temelli)
   Marka kılavuzunun tek doğruluk kaynağı. Hem /brandbook/ hem site okur.

   Palet doğrudan logodan türetildi:
     siyah  — kürenin ızgarası ve figür
     mavi   — kürenin hücreleri (#36A1D9, dosyadan ölçüldü)
     beyaz  — zemin
   Turuncu yalnızca eylem rengidir; logoda yoktur, sayfada da azdır.
   ============================================================================ */

:root{
  /* --- ZEMİNLER --------------------------------------------------------
     Zemin daima saf beyaz. Krem, bej, kırık beyaz KULLANILMAZ.
     --zemin-2 bölüm ayırmak için; logo mavisine doğru soğuk bir gri.      */
  --beyaz:        #FFFFFF;
  --zemin-2:      #F4F8FB;
  --koyu:         #0F1012;   /* logodaki siyah */
  --koyu-2:       #1C1F24;

  /* --- METİN ----------------------------------------------------------- */
  --ink:          #0F1012;   /* beyazda 19.04:1 — logonun siyahı */
  --ink-2:        #2B2F36;
  --gri:          #556070;   /* beyazda  6.38:1 — ikincil metin */
  --cizgi:        #E1E7ED;
  --cizgi-2:      #EDF1F5;

  /* --- MAVİ: marka rengi ------------------------------------------------
     Logonun mavisi. Beyaz zeminde METİN OLARAK KULLANILAMAZ (2.89:1).
     Dolgu olarak kullanılır ve üstüne --ink metin gelir (6.58:1).
     Yazı gerektiğinde --mavi-metin kullanılır.                            */
  --mavi:         #36A1D9;
  --mavi-metin:   #17719F;   /* beyazda 5.39:1 — bağlantı ve vurgu metni  */
  --mavi-koyu:    #146593;   /* beyazda 6.34:1 — üzerine gelince          */
  --mavi-wash:    #E8F4FB;

  /* --- TURUNCU: eylem rengi ---------------------------------------------
     YALNIZCA dolgu. Üstüne DAİMA --ink metin (6.64:1).
     Beyaz zeminde turuncu METİN yasaktır (2.87:1) — --turuncu-metin var.  */
  --turuncu:      #FF6A13;
  --turuncu-koyu: #E85D0C;
  --turuncu-metin:#C44A08;   /* beyazda 4.85:1 */
  --turuncu-wash: #FFF0E6;

  /* --- DURUM ------------------------------------------------------------ */
  --yesil:        #0F7A3D;
  --yesil-koyu:   #0B5C2E;

  /* --- TİPOGRAFİ --------------------------------------------------------
     Tek aile: Archivo. Serif yok. Başlıklar 800, sıkı harf aralığı.       */
  --font:         'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sik:          -0.035em;   /* dev başlıklar */
  --sik-2:        -0.022em;   /* bölüm başlıkları */
  --genis:         0.14em;    /* etiketler, büyük harf */

  /* --- ÖLÇEK (4px tabanlı) ---------------------------------------------- */
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px; --a5: 24px;
  --a6: 32px; --a7: 48px; --a8: 64px; --a9: 96px; --a10: 128px;

  /* --- GEOMETRİ ---------------------------------------------------------
     Köşeler hafif yuvarlak, gölge yok — gölge yerine çizgi.               */
  --r1: 4px;  --r2: 8px;  --r3: 14px; --r-tam: 999px;
  --kenar: 1px solid var(--cizgi);

  --wrap: 1200px;
  --gut: 24px;
  --hdr: 72px;
}

/* Jeton dışı hiçbir renk kullanılmaz. Yeni renk gerekiyorsa önce buraya. */


/* ============================================================================
   TOPALOĞLU — SİTE
   Tüm değerler tokens.css'ten gelir. Buraya ham renk yazılmaz.
   Kural: zemin beyaz · mavi yapar · turuncu tıklatır (üstüne daima siyah).
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--beyaz);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--mavi-metin);text-underline-offset:.16em}
a:hover{color:var(--mavi-koyu)}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.06;letter-spacing:var(--sik-2);text-wrap:balance}
p{margin:0 0 1em}
section[id],[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
:focus-visible{outline:3px solid var(--mavi);outline-offset:3px;border-radius:var(--r1)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-dar{max-width:780px;margin-inline:auto;padding-inline:var(--gut)}

/* ---------------------------------------------------------------- tipografi */
.etiket{
  display:block;font-size:.76rem;font-weight:800;letter-spacing:var(--genis);
  text-transform:uppercase;color:var(--turuncu-metin);margin:0 0 var(--a3);
}
.bl--koyu .etiket{color:var(--turuncu)}
h2.bolum{font-size:clamp(1.95rem,4.4vw,3.05rem);letter-spacing:var(--sik);max-width:20ch}
h2.bolum em{font-style:normal;color:var(--mavi-metin)}
.gir{font-size:1.14rem;color:var(--gri);max-width:62ch;margin:var(--a4) 0 0}
.bl--koyu .gir{color:#A8B8CD}
.vurgu{background:var(--turuncu-wash);padding:.06em .28em;border-radius:var(--r1);font-weight:600}

/* ------------------------------------------------------------------ düğmeler */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:700;font-size:1rem;
  padding:.88em 1.55em;border-radius:var(--r2);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.btn--1{background:var(--turuncu);color:var(--ink)}
.btn--1:hover{background:var(--turuncu-koyu);color:var(--ink)}
.btn--2{background:var(--mavi-koyu);color:#fff}
.btn--2:hover{background:#0E4E74;color:#fff}
.btn--3{background:transparent;color:var(--ink);border-color:var(--cizgi)}
.btn--3:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--4{background:var(--yesil);color:#fff}
.btn--4:hover{background:var(--yesil-koyu);color:#fff}
.btn--kck{padding:.6em 1.05em;font-size:.9rem}
.btn--tam{width:100%}
.btn svg{width:1.05em;height:1.05em;flex:none}

.rozet{
  display:inline-flex;align-items:center;gap:.4em;font-size:.74rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:.44em .85em;border-radius:var(--r-tam);
}
.rozet--turuncu{background:var(--turuncu);color:var(--ink)}
.rozet--mavi{background:var(--mavi-wash);color:var(--mavi-koyu)}
.rozet--cizgi{border:1.5px solid var(--cizgi);color:var(--gri)}
.bl--koyu .rozet--cizgi{border-color:#2C3A57;color:#A8B8CD}

/* ------------------------------------------------------------------- marka */
.kilit{display:inline-flex;align-items:center;gap:.56em;text-decoration:none;color:inherit}
.kilit img{width:2.5em;height:2.5em;flex:none}
.kilit-ad{
  font-weight:800;font-size:1.34em;letter-spacing:-.022em;line-height:1;
  color:var(--ink);white-space:nowrap;
}
.kilit-mavi{color:var(--mavi-metin);margin-left:.3em}
.kilit--ters .kilit-ad{color:#fff}
.kilit--ters .kilit-mavi{color:var(--mavi)}

/* ------------------------------------------------------------------ üst şerit */
.topbar{background:var(--koyu);color:#fff;font-size:.84rem;font-weight:600}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--a5);min-height:40px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;display:inline-block;padding:.5rem 0}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar .sl{font-weight:800;letter-spacing:.02em}

/* --------------------------------------------------------------------- başlık */
.hdr{position:sticky;top:0;z-index:50;background:var(--beyaz);border-bottom:var(--kenar)}
.hdr .wrap{display:flex;align-items:center;gap:var(--a5);min-height:var(--hdr)}
.hdr .kilit{font-size:16px;flex:none}
.nav{display:flex;gap:var(--a5);margin-left:auto;font-size:.97rem;font-weight:600}
.nav a{color:var(--ink-2);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--mavi-metin);border-bottom-color:var(--mavi)}
.hdr-cta{display:flex;gap:var(--a2);align-items:center;flex:none}
.nav-ac{display:none;background:none;border:1.5px solid var(--cizgi);border-radius:var(--r2);width:46px;height:42px;cursor:pointer;margin-left:auto}
.nav-ac span,.nav-ac span::before,.nav-ac span::after{display:block;height:2px;width:20px;background:var(--ink);margin-inline:auto;transition:.18s}
.nav-ac span::before,.nav-ac span::after{content:'';position:relative}
.nav-ac span::before{top:-6px}.nav-ac span::after{top:4px}

/* ----------------------------------------------------------------------- hero */
.hero{padding:clamp(40px,6vw,72px) 0 0}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.3rem);letter-spacing:var(--sik);margin:var(--a4) 0 var(--a5)}
.hero h1 em{font-style:normal;color:var(--mavi-metin)}
.hero-alt{font-size:1.2rem;color:var(--gri);max-width:46ch;margin-bottom:var(--a6)}
.hero-cta{display:flex;gap:var(--a3);flex-wrap:wrap;margin-bottom:var(--a5)}
.hero-rozet{display:flex;gap:var(--a2);flex-wrap:wrap}
.hero-gorsel img{width:100%;aspect-ratio:1400/676;object-fit:cover;border-radius:var(--r3)}
.hero-alti{font-size:.88rem;color:var(--gri);margin:var(--a3) 0 0}

/* ------------------------------------------------------------- rakam şeridi */
.serit{border-top:var(--kenar);border-bottom:var(--kenar);margin-top:clamp(40px,6vw,72px)}
.serit .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.serit .wrap>div{padding:var(--a6) var(--a5) var(--a6) 0;border-right:var(--kenar)}
.serit .wrap>div:last-child{border-right:0;padding-right:0}
.serit b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:var(--sik);line-height:1;font-variant-numeric:tabular-nums}
.serit span{display:block;font-size:.95rem;color:var(--gri);margin-top:var(--a2)}

/* ----------------------------------------------------------------- arşiv şerit */
.arsiv-serit{background:var(--zemin-2);border-bottom:var(--kenar)}
.arsiv-serit .wrap{display:flex;align-items:center;gap:var(--a6);padding-block:var(--a5);flex-wrap:wrap}
.arsiv-kareler{display:flex;gap:var(--a3);flex:none}
.arsiv-kareler img{width:78px;height:78px;object-fit:cover;border-radius:var(--r2)}
.arsiv-metin{flex:1;min-width:260px}
.arsiv-metin b{display:block;font-weight:800;font-size:1.06rem;letter-spacing:var(--sik-2)}
.arsiv-metin p{margin:.25em 0 0;color:var(--gri);font-size:.98rem}

/* --------------------------------------------------------------------- bölüm */
.bl{padding:clamp(56px,8vw,104px) 0}
.bl--gri{background:var(--zemin-2)}
.bl--koyu{background:var(--koyu);color:#fff}
.bl--koyu h2,.bl--koyu h3{color:#fff}
.bl-bas{margin-bottom:var(--a7)}

/* ----------------------------------------------------------------- hizmetler */
.hizmetler{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a4)}
.hizmet{
  border:var(--kenar);border-radius:var(--r3);padding:var(--a6);background:var(--beyaz);
  display:flex;flex-direction:column;gap:var(--a3);transition:border-color .15s;
}
.hizmet:hover{border-color:var(--mavi)}
.hizmet-no{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--turuncu-metin)}
.hizmet h3{font-size:1.24rem}
.hizmet p{margin:0;color:var(--gri);font-size:1rem}

/* --------------------------------------------------------------------- süreç */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a4)}
.adim{background:var(--beyaz);border-radius:var(--r3);padding:var(--a6);border:var(--kenar);position:relative}
.adim-no{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-tam);
  background:var(--mavi);color:var(--ink);font-weight:800;font-size:.95rem;margin-bottom:var(--a4);
}
.adim h3{font-size:1.14rem;margin-bottom:var(--a2)}
.adim p{margin:0;color:var(--gri);font-size:.99rem}

/* --------------------------------------------------------------------- fiyat */
.fiyat-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:start}
.fiyat-yazi p:last-child{margin-bottom:0}
.etken{border:2px solid var(--ink);border-radius:var(--r3);padding:var(--a6);background:var(--beyaz)}
.etken h3{font-size:1.2rem;margin-bottom:var(--a4)}
.etken ol{margin:0;padding:0;list-style:none;counter-reset:e}
.etken li{
  counter-increment:e;display:grid;grid-template-columns:28px 1fr;gap:var(--a3);
  padding:.72em 0;border-bottom:1px solid var(--cizgi-2);font-size:1rem;
}
.etken li:last-child{border-bottom:0}
.etken li::before{
  content:counter(e);font-weight:800;font-size:.82rem;color:var(--ink);
  background:var(--turuncu);border-radius:var(--r1);display:grid;place-items:center;
  width:22px;height:22px;margin-top:.15em;
}

/* --------------------------------------------------------------- referanslar */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a4)}
.ref{background:var(--beyaz);border:var(--kenar);border-radius:var(--r3);padding:var(--a6);display:flex;flex-direction:column}
.ref-one{font-size:1.12rem;font-weight:800;letter-spacing:var(--sik-2);line-height:1.28;margin:0 0 var(--a3)}
.ref-metin{font-size:.98rem;color:var(--gri);margin:0 0 var(--a5);line-height:1.56;flex:1}
.ref-alt{display:flex;justify-content:space-between;gap:var(--a3);align-items:baseline;border-top:1px solid var(--cizgi-2);padding-top:var(--a3)}
.ref-isim{font-weight:700;font-size:.95rem;font-style:normal}
.ref-nereden{font-size:.78rem;color:var(--gri);text-align:right}
.ref-foto{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a4);margin-top:var(--a6)}
.ref-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r3)}

/* ------------------------------------------------------------------ depolama */
.depo-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,5vw,56px);align-items:center}
.depo-foto{display:grid;grid-template-columns:1fr 1fr;gap:var(--a3)}
.depo-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r3)}
.depo-liste{list-style:none;margin:var(--a5) 0 var(--a6);padding:0}
.depo-liste li{padding:.7em 0 .7em 1.8rem;border-bottom:1px solid var(--koyu-2);position:relative;font-size:1.02rem}
.depo-liste li::before{content:'';position:absolute;left:0;top:1.3em;width:11px;height:2px;background:var(--turuncu)}

/* ------------------------------------------------------------------- bölgeler */
.bolge-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px)}
.bolge-bas{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--a3);border-bottom:2px solid var(--ink);margin-bottom:var(--a2)}
.bolge-bas h3{font-size:1.08rem}
.bolge-bas span{font-size:.78rem;font-weight:700;color:var(--gri);letter-spacing:.06em}
.bolge-liste{columns:2;column-gap:var(--a5);margin:0;padding:0;list-style:none}
.bolge-liste li{break-inside:avoid}
.bolge-liste a,.bolge-bekliyor{
  display:block;padding:.5em 0;border-bottom:1px solid var(--cizgi-2);
  font-size:.98rem;font-weight:600;text-decoration:none;
}
.bolge-liste a{color:var(--ink-2)}
.bolge-liste a:hover{color:var(--mavi-metin);border-bottom-color:var(--mavi)}
.bolge-bekliyor{color:var(--gri);font-weight:500}

/* ----------------------------------------------------------------------- SSS */
.sss details{border-bottom:var(--kenar)}
.sss details:first-child{border-top:var(--kenar)}
.sss summary{
  font-weight:700;font-size:1.1rem;padding:1.2em 2.6rem 1.2em 0;cursor:pointer;
  list-style:none;position:relative;letter-spacing:-.01em;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:'';position:absolute;right:.5rem;top:1.7em;width:11px;height:11px;
  border-right:2.4px solid var(--turuncu-metin);border-bottom:2.4px solid var(--turuncu-metin);
  transform:rotate(45deg);transition:transform .18s;
}
.sss details[open] summary::after{transform:rotate(-135deg);top:1.95em}
.sss summary:hover{color:var(--mavi-metin)}
.sss-c{padding:0 3rem 1.5em 0;color:var(--gri);max-width:74ch}
.sss-c p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- teklif */
.teklif{border:2px solid var(--ink);border-radius:var(--r3);padding:clamp(20px,3vw,32px);background:var(--beyaz)}
.teklif h3{font-size:1.32rem;margin-bottom:var(--a2)}
.teklif>p{color:var(--gri);font-size:1rem;margin-bottom:var(--a5)}
.alanlar{display:grid;grid-template-columns:1fr 1fr;gap:var(--a3)}
.alan{display:flex;flex-direction:column;gap:.35em}
.alan--tam{grid-column:1/-1}
.alan label{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gri)}
.alan input,.alan select{
  font-family:var(--font);font-size:1rem;padding:.78em .85em;
  border:1.5px solid var(--cizgi);border-radius:var(--r2);background:var(--beyaz);color:var(--ink);width:100%;
}
.alan input:focus,.alan select:focus{outline:none;border-color:var(--mavi);box-shadow:0 0 0 3px var(--mavi-wash)}
.teklif .btn{margin-top:var(--a4)}
.teklif-kvkk{font-size:.86rem;color:var(--gri);margin:var(--a4) 0 0;line-height:1.45}

/* ----------------------------------------------------------------- iletişim */
.ofis-grid{display:grid;gap:var(--a4)}
.ofis{border:var(--kenar);border-radius:var(--r3);padding:var(--a6)}
.ofis h3{font-size:1.1rem;margin-bottom:var(--a4);display:flex;align-items:center;gap:.55em}
.ofis h3::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--turuncu);flex:none}
.ofis{min-width:0}
.ofis dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5em 1.1em;font-size:1rem;min-width:0}
.ofis dt{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gri);padding-top:.35em}
.ofis dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ofis a{text-decoration:none;font-weight:600;display:inline-block;padding:.3em 0;margin:-.3em 0}
.ofis a:hover{text-decoration:underline}
.hazirlik{border-left:3px solid var(--turuncu);padding-left:var(--a4);margin-top:var(--a5)}
.hazirlik h4{font-size:.76rem;letter-spacing:var(--genis);text-transform:uppercase;color:var(--gri);margin:0 0 var(--a3);font-weight:700}
.hazirlik ul{margin:0;padding-left:1.1rem;color:var(--gri);font-size:1rem}
.hazirlik li{padding:.2em 0}

/* -------------------------------------------------------------------- footer */
.ftr{background:var(--koyu);color:#A8B8CD;padding:var(--a9) 0 var(--a5);font-size:1rem}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--a7);padding-bottom:var(--a7);border-bottom:1px solid var(--koyu-2)}
.ftr h3{font-size:.74rem;letter-spacing:var(--genis);text-transform:uppercase;color:#fff;margin:0 0 var(--a4);font-weight:700}
.ftr .kilit{font-size:15px;color:#fff;margin-bottom:var(--a4)}
.ftr a{color:#C6D2E0;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{padding:.06em 0}
.ftr li a{display:inline-block;padding:.34em 0}
.ftr-sl{color:var(--turuncu);font-weight:800;font-size:.95rem;letter-spacing:.03em;margin-bottom:var(--a3)}
.ftr-alt{display:flex;justify-content:space-between;gap:var(--a5);flex-wrap:wrap;padding-top:var(--a5);font-size:.88rem;color:#7C8CA3}
.ftr-alt a{color:#7C8CA3}

/* ---------------------------------------------------------------- mobil bar */
.mobil-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--beyaz);border-top:var(--kenar);padding:var(--a2);gap:var(--a2)}
.mobil-bar a{flex:1;justify-content:center}

/* ============================================================ ilçe sayfası */
.iz{font-size:.86rem;color:var(--gri);padding:var(--a4) 0 0}
.iz a{color:var(--gri);text-decoration:none}
.iz a:hover{color:var(--mavi-metin);text-decoration:underline}
.iz span{color:var(--ink);font-weight:700}

.ilce-hero{padding:var(--a6) 0 clamp(40px,6vw,72px)}
.ilce-hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,5vw,56px);align-items:start}
.ilce-hero h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:var(--sik);margin:var(--a4) 0 var(--a5)}
.ilce-giris h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:var(--a4)}
.ilce-giris p{color:var(--gri);font-size:1.06rem}

.saha{display:grid;gap:var(--a4)}
.saha-k{border:var(--kenar);border-radius:var(--r3);padding:var(--a6);display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:var(--a5);align-items:start}
.saha-bolge{font-weight:800;font-size:1.06rem;letter-spacing:var(--sik-2);margin:0}
.saha-durum,.saha-ne{margin:0;font-size:1rem}
.saha-durum{color:var(--gri)}
.saha-ne{padding-left:var(--a4);border-left:3px solid var(--turuncu)}
.saha-et{font-size:.7rem;font-weight:800;letter-spacing:var(--genis);text-transform:uppercase;color:var(--gri);display:block;margin-bottom:var(--a2)}

.mahalle{display:flex;flex-wrap:wrap;gap:var(--a2);margin:var(--a5) 0 0;padding:0}
.mahalle li{list-style:none}
.mahalle span{display:block;font-size:.9rem;font-weight:600;padding:.42em .85em;border-radius:var(--r-tam);background:var(--zemin-2);color:var(--ink-2)}
.komsu{display:flex;flex-wrap:wrap;gap:var(--a3)}
.komsu a{font-size:.96rem;font-weight:700;padding:.65em 1.1em;border:1.5px solid var(--cizgi);border-radius:var(--r2);text-decoration:none;color:var(--ink-2)}
.komsu a:hover{border-color:var(--mavi);color:var(--mavi-metin)}

/* ------------------------------------------------------------------ duyarlı */
@media (max-width:1040px){
  .hero .wrap,.fiyat-grid,.depo-grid,.bolge-grid,.ilce-hero .wrap{grid-template-columns:1fr}
  .hero-gorsel{order:-1}
  .hizmetler{grid-template-columns:1fr 1fr}
  .surec{grid-template-columns:1fr 1fr}
  .ref-grid{grid-template-columns:1fr 1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .saha-k{grid-template-columns:1fr;gap:var(--a4)}
}
@media (max-width:840px){
  body{font-size:16px;padding-bottom:70px}
  .nav,.hdr-cta{display:none}
  .nav-ac{display:block}
  .hdr.acik .nav{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--beyaz);border-bottom:var(--kenar);padding:var(--a2) var(--gut) var(--a4);
  }
  .hdr.acik .nav a{padding:.9rem 0;border-bottom:1px solid var(--cizgi-2);font-size:1.06rem}
  .hdr.acik .nav-ac span{background:transparent}
  .hdr.acik .nav-ac span::before{top:-1px;transform:rotate(45deg)}
  .hdr.acik .nav-ac span::after{top:-3px;transform:rotate(-45deg)}
  .serit .wrap{grid-template-columns:1fr 1fr}
  .serit .wrap>div:nth-child(2n){border-right:0}
  .serit .wrap>div:nth-child(-n+2){border-bottom:var(--kenar)}
  .hizmetler,.surec,.ref-grid,.depo-foto{grid-template-columns:1fr}
  .ref-foto{grid-template-columns:1fr 1fr}
  .alanlar{grid-template-columns:1fr}
  .bolge-liste{columns:1}
  .mobil-bar{display:flex}
  .hero-gorsel img{aspect-ratio:3/2}
  .ofis dl{grid-template-columns:1fr;gap:.15em}
  .ofis dt{padding-top:.6em}
  .topbar{font-size:.8rem}
  .topbar .wrap{justify-content:space-between;gap:var(--a3);min-height:36px}
  .topbar .gizle-mobil{display:none}
  .arsiv-serit .wrap{gap:var(--a4)}
  .arsiv-kareler img{width:62px;height:62px}
}
@media (max-width:480px){
  .ftr-grid{grid-template-columns:1fr}
  .kilit{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.topbar,.hdr,.mobil-bar,.teklif{display:none}}

/* ============================================================ iç sayfalar */
.ic-hero{padding:var(--a7) 0 var(--a8);border-bottom:var(--kenar)}
.ic-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:var(--sik);margin:var(--a4) 0 var(--a5)}
.ic-hero .gir{font-size:1.18rem;margin:0}
.ic-hero .wrap{max-width:860px}

.arsiv-buyuk{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5)}
.arsiv-buyuk figure{margin:0}
.arsiv-buyuk img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r3)}
.arsiv-buyuk h3{font-size:1.1rem;margin:var(--a4) 0 var(--a2)}
.arsiv-buyuk p{margin:0;color:var(--gri);font-size:.99rem}
.bl--koyu .arsiv-buyuk p{color:#A8B8CD}

.ekip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a4)}
.ekip-k{border:var(--kenar);border-radius:var(--r3);padding:var(--a6)}
.ekip-k b{display:block;font-size:1.1rem;font-weight:800;letter-spacing:var(--sik-2)}
.ekip-k span{display:block;color:var(--gri);font-size:.95rem;margin-top:var(--a1)}
.ekip-k p{margin:var(--a3) 0 0;font-size:.97rem;color:var(--gri)}

.zaman{border-top:2px solid var(--ink);margin-top:var(--a5)}
.zaman-sat{display:grid;grid-template-columns:120px 1fr;gap:var(--a5);padding:var(--a5) 0;border-bottom:var(--kenar);align-items:baseline}
.zaman-yil{font-size:1.5rem;font-weight:800;letter-spacing:var(--sik);font-variant-numeric:tabular-nums}
.zaman-sat p{margin:0;color:var(--gri)}

.hiz-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--a4)}
.hiz-k{border:var(--kenar);border-radius:var(--r3);padding:var(--a6);text-decoration:none;color:inherit;display:block;transition:border-color .15s}
.hiz-k:hover{border-color:var(--mavi);color:inherit}
.hiz-k h3{font-size:1.24rem;margin-bottom:var(--a2)}
.hiz-k p{margin:0;color:var(--gri);font-size:1rem}
.hiz-k .git{display:inline-block;margin-top:var(--a4);font-weight:700;color:var(--mavi-metin);font-size:.95rem}

.liste-net{list-style:none;margin:var(--a5) 0 0;padding:0}
.liste-net li{padding:.8em 0 .8em 2rem;border-bottom:1px solid var(--cizgi-2);position:relative;font-size:1.04rem}
.liste-net li::before{
  content:'';position:absolute;left:0;top:1.35em;width:13px;height:7px;
  border-left:2.6px solid var(--turuncu);border-bottom:2.6px solid var(--turuncu);transform:rotate(-45deg);
}
.bl--koyu .liste-net li{border-bottom-color:var(--koyu-2)}

@media(max-width:1040px){ .arsiv-buyuk,.ekip{grid-template-columns:1fr 1fr} .hiz-liste{grid-template-columns:1fr} }
@media(max-width:840px){ .arsiv-buyuk,.ekip{grid-template-columns:1fr} .zaman-sat{grid-template-columns:1fr;gap:var(--a2)} }

/* ============================================================ video şeritleri */
.videolar{background:var(--koyu);color:#fff;padding:clamp(56px,8vw,104px) 0;overflow:hidden}
.videolar h2,.videolar h3{color:#fff}
.videolar .gir{color:#A8B8CD}
.videolar .etiket{color:var(--turuncu)}   /* koyu zeminde 6.64:1 */
.videolar .bl-bas{margin-bottom:var(--a7)}

/* şerit kapsayıcısı — kenarlarda yumuşak kesim */
.vseritler{
  display:flex;flex-direction:column;gap:var(--a3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.vserit{overflow:hidden}
.vray{
  display:flex;gap:var(--a3);width:max-content;
  animation:kay var(--sure,60s) linear infinite;
  will-change:transform;
}
.vserit:nth-child(2) .vray{animation-direction:reverse}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* fare üstündeyken ve klavye odağındayken dursun */
.vseritler:hover .vray,.vseritler:focus-within .vray{animation-play-state:paused}

.vkart{
  position:relative;flex:none;width:190px;aspect-ratio:9/16;
  border-radius:var(--r3);overflow:hidden;background:var(--koyu-2);
  border:0;padding:0;cursor:pointer;display:block;color:inherit;
}
.vkart video,.vkart img{width:100%;height:100%;object-fit:cover;display:block}
.vkart img{position:absolute;inset:0}
.vkart video{position:relative;z-index:1}
.vkart::after{
  content:'';position:absolute;inset:auto 0 0 0;height:58%;z-index:2;
  background:linear-gradient(transparent,rgba(10,11,13,.86));pointer-events:none;
}
.vkart-bilgi{position:absolute;left:12px;right:12px;bottom:11px;z-index:3;text-align:left}
.vkart-isim{display:block;font-weight:800;font-size:.95rem;letter-spacing:-.01em;color:#fff;line-height:1.2}
.vkart-yer{display:block;font-size:.78rem;color:#C6D2E0;margin-top:2px}
.vkart-oynat{
  position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:var(--r-tam);
  background:var(--turuncu);display:grid;place-items:center;transition:transform .15s;
}
.vkart-oynat svg{width:13px;height:13px;fill:var(--ink);margin-left:2px}
.vkart:hover .vkart-oynat,.vkart:focus-visible .vkart-oynat{transform:scale(1.14)}
.vkart:focus-visible{outline:3px solid var(--mavi);outline-offset:3px}

/* ---- tam video penceresi ---- */
.vpencere{
  border:0;padding:0;background:transparent;width:min(94vw,420px);
  max-height:92vh;overflow:visible;margin:auto;    /* showModal'da ortalar */
}
.vpencere::backdrop{background:rgba(8,9,11,.9)}
.vpencere video{width:100%;border-radius:var(--r3);display:block;background:#000;max-height:84vh}
.vpencere-ust{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--a4);margin-bottom:var(--a3)}
.vpencere-ad{color:#fff;font-weight:800;font-size:1.06rem;letter-spacing:-.015em}
.vpencere-yer{color:#A8B8CD;font-size:.86rem;margin-top:2px}
.vkapat{
  background:none;border:1.5px solid #39414D;color:#fff;border-radius:var(--r-tam);
  width:38px;height:38px;cursor:pointer;flex:none;display:grid;place-items:center;font-size:1.1rem;line-height:1;
}
.vkapat:hover{background:#fff;color:var(--ink);border-color:#fff}

@media (max-width:840px){
  .vkart{width:142px}
  .vseritler{gap:var(--a2)}
  .vray{gap:var(--a2)}
}
@media (prefers-reduced-motion:reduce){
  .vray{animation:none;width:auto}
  .vserit{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .vseritler{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================ instagram */
.insta{padding:clamp(56px,8vw,104px) 0;border-top:var(--kenar)}
.insta-bas{display:grid;grid-template-columns:1fr auto;gap:var(--a5);align-items:end;margin-bottom:var(--a7)}
.insta-kullanici{
  display:inline-flex;align-items:center;gap:.45em;font-weight:700;font-size:1.02rem;
  color:var(--mavi-metin);text-decoration:none;margin-top:var(--a3);
}
.insta-kullanici svg{width:19px;height:19px}
.insta-kullanici:hover{text-decoration:underline}

.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a3)}
.insta-kare{
  position:relative;display:block;aspect-ratio:1;border-radius:var(--r2);
  overflow:hidden;background:var(--zemin-2);text-decoration:none;
}
.insta-kare img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.insta-kare:hover img,.insta-kare:focus-visible img{transform:scale(1.06)}
.insta-kare::after{
  content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(10,11,13,.82));
  opacity:0;transition:opacity .25s;
}
.insta-kare:hover::after,.insta-kare:focus-visible::after{opacity:1}
.insta-yazi{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:2;color:#fff;
  font-size:.86rem;font-weight:600;line-height:1.3;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
}
.insta-kare:hover .insta-yazi,.insta-kare:focus-visible .insta-yazi{opacity:1;transform:none}
.insta-rozet{
  position:absolute;top:9px;right:9px;z-index:2;width:24px;height:24px;border-radius:var(--r1);
  background:rgba(10,11,13,.62);display:grid;place-items:center;
}
.insta-rozet svg{width:12px;height:12px;fill:#fff}
.insta-kare:focus-visible{outline:3px solid var(--mavi);outline-offset:3px}

@media (max-width:840px){
  .insta-grid{grid-template-columns:repeat(2,1fr)}
  .insta-bas{grid-template-columns:1fr}
  /* dokunmatikte hover yok — yazı hep görünsün */
  .insta-kare::after{opacity:1}
  .insta-yazi{opacity:1;transform:none}
}

/* hizmet sayfası görseli */
.hizmet-gorsel{margin:0;border-bottom:var(--kenar)}
.hizmet-gorsel img{width:100%;max-height:min(58vh,520px);object-fit:cover;display:block}