/* Stoper — SHARED LOCKED CHROME (identical to v0.1)
   tokens · header · footer · chat bubble · buttons · global drop target */

/* site images are content, not files — dragging one must not read as an upload */
img{-webkit-user-drag:none;user-drag:none}

:root{
  --blue:#005095;
  --blue-dark:#003a70;
  --blue-mid:#3b78ae;
  --blue-soft:#588cb9;
  --panel:#f0f0f8;
  --blue-tint:#e8f1fa;
  --blue-hover:#316cbe;
  --paper:#ffffff;
  --ink:#111a24;
  --muted:#6c757d;
  --line:#dfe4ec;
  --line-strong:#c6d0dd;
  --ok:#127a53;
  --ok-bg:#e7f4ee;
  --warn:#b45309;

  --r-sm:8px;
  --r:10px;
  --r-lg:16px;
  --pill:999px;

  --font:"Inter","Segoe UI",system-ui,sans-serif;
  --shadow-sm:0 1px 3px rgba(17,26,36,.06);
  --shadow:0 8px 26px rgba(17,26,36,.09);
  --shadow-lg:0 18px 44px rgba(0,80,149,.14);

  --header-h:68px;
  --wrap:1240px;
  --ease:cubic-bezier(.22,.9,.24,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* the img reset above overrides the UA's [hidden]{display:none} — restore it */
[hidden]{display:none!important}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue-soft);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* preview marker — remove in production */
/* preview marker: a floating badge, NOT a stacked band. As a band above the
   header it made the top of the page move in two stages on scroll (banner
   slides away, then the bar pins) and pushed every layout calc around. */
.preview-flag{
  /* back at the top per request — but still FIXED, floating just under the
     bar, so it never re-enters the layout (the in-flow band was the cause
     of the two-stage corner motion on scroll) */
  /* docked left: centered, it sat exactly on the inner pages’ centered
     breadcrumb and covered it */
  position:fixed;left:14px;
  top:calc(var(--sticky-h,68px) + 10px);z-index:880;
  background:var(--warn);color:#fff;border-radius:999px;
  padding:7px 14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;
  max-width:min(60vw,340px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ===================== LOCKED HEADER ===================== */
.site-header{
  background:var(--blue);color:#fff;position:sticky;top:0;z-index:900;
  box-shadow:0 2px 10px rgba(0,58,112,.18);
  /* the hero holds a <video> and a backdrop-filter layer; both are GPU-composited
     and will paint over a non-promoted sticky header. Promote it and isolate it. */
  isolation:isolate;transform:translateZ(0);will-change:transform;
}
.site-header .bar{
  /* full bleed, not capped at --wrap: the logo stays hard left and the actions
     hard right at every width. Capped-and-centred left the logo drifting
     hundreds of px inward on a wide screen while the bar itself ran edge to edge. */
  width:100%;max-width:none;margin:0;
  padding:0 clamp(16px,2.6vw,48px);
  height:var(--header-h);display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
}
.brand{display:flex;flex-direction:column;line-height:1;color:#fff;text-decoration:none;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand .b1{font-size:21px;font-weight:800;letter-spacing:.01em}
.brand .b2{font-size:9.5px;font-weight:600;letter-spacing:.42em;margin-top:3px;color:#cfe0f0}
.site-nav{display:flex;gap:clamp(12px,2vw,30px);margin-left:14px}
.site-nav a{color:#fff;font-size:15px;font-weight:500;padding:6px 2px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{text-decoration:none;border-bottom-color:#fff}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn-quote{
  background:#fff;color:var(--blue-dark);font-weight:700;font-size:14.5px;
  border:1px solid #fff;border-radius:var(--r-sm);padding:9px 18px;white-space:nowrap;
  transition:background .2s,color .2s;
}
.btn-quote:hover{background:var(--blue-tint);color:var(--blue-dark);border-color:var(--blue-tint);text-decoration:none}
.icon-btn{
  /* ringless: bare icons, bigger glyphs; the hit area stays 40px */
  width:40px;height:40px;border-radius:50%;border:0;
  display:grid;place-items:center;color:#fff;background:transparent;cursor:pointer;
  transition:background .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.16)}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9}
.nav-toggle{display:none}

@media(max-width:900px){
  .site-nav{
    /* absolute against the header itself, not fixed to a hard-coded offset:
       the preview flag makes the header end at 100px unscrolled and 69px once
       it is pinned, so a fixed top:var(--header-h) parked the drawer BEHIND
       the bar and the links read as hidden underneath it */
    position:absolute;top:100%;left:0;right:0;
    background:var(--blue-dark);box-shadow:0 14px 26px rgba(0,30,58,.3);
    flex-direction:column;gap:0;margin:0;
    /* padding must be 0 while closed. max-height cannot shrink a border box
       below its own padding, so 6px+6px kept a 12px strip of --blue-dark
       showing under the header — a second colour on an otherwise one-tone bar */
    padding:0;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s var(--ease),padding .3s var(--ease),
               visibility 0s linear .3s;
  }
  /* closed means gone: not visible, not clickable, not in the tab order */
  .site-nav.open{
    max-height:340px;padding:6px 0;visibility:visible;
    transition:max-height .3s var(--ease),padding .3s var(--ease),visibility 0s;
  }
  .site-nav a{padding:14px clamp(16px,4vw,40px);border-bottom:1px solid rgba(255,255,255,.1)}
  .site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.1);background:rgba(255,255,255,.08)}
  .nav-toggle{display:grid}
  .btn-quote{padding:8px 13px;font-size:13.5px}
  .header-actions{gap:8px}
}
/* small screens: shrink the CTA and tighten the bar instead of dropping controls */
@media(max-width:560px){
  .site-header .bar{gap:10px;padding-left:14px;padding-right:14px}
  .q-long{display:none}                      /* "Anında " hidden; "Fiyat Teklifi" stays */
  .btn-quote{padding:8px 13px;font-size:13px}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:21px;height:21px}
  .header-actions{gap:6px}
  .brand .b1{font-size:19px}
  .brand .b2{font-size:8.5px;letter-spacing:.32em}
}
@media(max-width:360px){
  .brand .b2{letter-spacing:.24em}
  .btn-quote{padding:8px 11px;font-size:12.5px}
}

/* ===================== LOCKED FOOTER ===================== */
.site-footer{background:var(--paper);border-top:1px solid var(--line);margin-top:80px}
.footer-cols{
  max-width:var(--wrap);margin:0 auto;padding:56px clamp(16px,4vw,40px) 34px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;
}
.footer-cols h3{font-size:19px;font-weight:700;margin:0 0 14px}
.footer-cols h4{font-size:15px;font-weight:700;margin:0 0 14px;color:var(--ink)}
.f-brand p{margin:0 0 10px;font-size:14.5px;color:var(--ink)}
.f-brand .meta{color:var(--ink)}
.f-brand .meta b{font-weight:700}
.f-brand .tag{color:var(--muted);margin-top:16px;font-size:14px;line-height:1.65}
.f-links a{display:block;color:var(--muted);font-size:14.5px;padding:5px 0}
.f-links a:hover{color:var(--blue)}
.footer-mid{
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px) 30px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.f-logo{display:flex;flex-direction:column;line-height:1;color:var(--ink)}
.f-logo .b1{font-size:22px;font-weight:800}
.f-logo .b2{font-size:9.5px;font-weight:600;letter-spacing:.42em;margin-top:3px;color:var(--muted)}
.paymarks{display:flex;gap:8px;flex-wrap:wrap}
.paymark{
  border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:10px;font-weight:700;
  letter-spacing:.04em;color:var(--muted);background:#fff;min-width:52px;text-align:center;
}
.footer-bottom{background:var(--blue);color:#dbe8f4}
.footer-bottom .inner{
  max-width:var(--wrap);margin:0 auto;padding:16px clamp(16px,4vw,40px);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;
}
.footer-bottom a{color:#fff;font-weight:500;margin-left:22px}
.footer-bottom .socials{display:flex;flex-wrap:wrap}
.footer-bottom .socials a:first-child{margin-left:0}
@media(max-width:900px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:30px}
  .f-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .footer-cols{grid-template-columns:1fr}
  .footer-bottom .inner{flex-direction:column;gap:12px}
  .footer-bottom a{margin-left:0;margin-right:18px}
}

/* floating chat bubble (locked) */
.chat-bubble{
  position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow-lg);transition:transform .2s var(--ease);
}
.chat-bubble:hover{transform:scale(1.06)}
.chat-bubble svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}
/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-sm);
  padding:14px 26px;font-size:16px;font-weight:700;border:1.5px solid transparent;
  cursor:pointer;transition:all .2s var(--ease);text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-dark)}
/* koyu (antrasit) zeminli bölümlerde hayalet buton: hover'da zemin beyaza
   döner, yazı bölümün antrasit rengine — beyaz üstünde beyaz kalmasın */
.stage .btn-ghost,.stage-2 .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.stage .btn-ghost:hover,.stage-2 .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--deep,#0b1017)}
.btn-lg{padding:16px 32px;font-size:17px}
/* ===================== GET. TARZI YÜKLEME KARTI =====================
   get.'deki dash-upload-card görünümünün statik kopyası — rehber ve
   kaynaklar sayfalarının alt CTA'sındaki teklif bağlantısı kartı. */
.dropzone-get{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:220px;padding:24px 16px;text-align:center;cursor:pointer;
  border:2px dashed #b9c6e0;border-radius:16px;background:#fafbfd;
  box-shadow:0 0 18px 2px rgba(29,41,57,.12);
  transition:border-color .25s ease,background-color .3s ease,box-shadow .25s ease;
  text-decoration:none;
}
.dropzone-get:hover{
  border-color:var(--blue);background:rgba(0,80,149,.07);
  box-shadow:0 0 26px 3px rgba(29,41,57,.22);text-decoration:none;
}
.dzg-baslik{font-size:12px;font-weight:800;letter-spacing:.06em;color:#1d2939;text-transform:uppercase;margin-bottom:4px}
.dzg-icon{width:40px;height:40px;border-radius:10px;background:#eef1f7;display:flex;align-items:center;justify-content:center;color:#475467}
.dzg-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dzg-text{font-size:13px;font-weight:700;letter-spacing:.01em;color:#1d2939;text-transform:uppercase}
.dzg-text .dzg-yukle{color:var(--blue)}
.dzg-formats{font-size:11.5px;color:var(--muted);opacity:.85}
/* ===================== QUOTE / UPLOAD BLOCK ===================== */
.quote-block{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:clamp(20px,3vw,30px);
}
.quote-block .qb-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.quote-block h3{margin:0}
.ctx-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--panel);color:var(--blue-dark);
  border-radius:var(--pill);padding:6px 14px;font-size:13px;font-weight:600;
}
.dropzone{
  display:block;
  border:2px dashed var(--line-strong);border-radius:var(--r);background:#fbfcfe;
  padding:clamp(24px,4vw,40px) 20px;text-align:center;transition:all .2s var(--ease);cursor:pointer;
}
.dropzone:hover,.dropzone.drag{border-color:var(--blue);background:var(--blue-tint)}
.dropzone .dz-icon{width:44px;height:44px;flex:none;margin:0 auto 12px;color:var(--blue);stroke:currentColor;fill:none;stroke-width:1.6}
.dropzone .dz-title{font-weight:700;font-size:17px;margin-bottom:6px}
.dropzone .dz-sub{color:var(--muted);font-size:14px;margin:0}
.qb-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.fact-pill{
  display:inline-flex;align-items:center;gap:7px;background:var(--ok-bg);color:var(--ok);
  border-radius:var(--pill);padding:7px 14px;font-size:13px;font-weight:600;
}
.fact-pill.neutral{background:var(--panel);color:var(--blue-dark)}
.qb-alt{margin:16px 0 0;font-size:14.5px;color:var(--muted)}

/* ===================== GLOBAL DROP TARGET ===================== */
/* The whole page is a drop target: files dropped anywhere are handed to the
   quote panel exactly as if they had been dropped on the upload box. */
#dropOverlay{
  position:fixed;inset:0;z-index:1000;display:none;place-items:center;
  background:rgba(0,58,112,.72);backdrop-filter:blur(3px);padding:24px;
}
#dropOverlay.on{display:grid}
#dropOverlay .panel{
  background:#fff;border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);text-align:center;
  max-width:560px;width:100%;box-shadow:var(--shadow-lg);border:3px dashed var(--blue-soft);
}
#dropOverlay .big{width:64px;height:64px;margin:0 auto 18px;color:var(--blue);stroke:currentColor;fill:none;stroke-width:1.5}
#dropOverlay h3{font-size:clamp(21px,3vw,27px);margin-bottom:8px}
#dropOverlay p{color:var(--muted);margin:0 auto;max-width:44ch}
#dropOverlay .filelist{
  list-style:none;padding:0;margin:18px 0 0;text-align:left;display:grid;gap:7px;
  max-height:190px;overflow:auto;
}
#dropOverlay .filelist li{
  display:flex;justify-content:space-between;gap:12px;background:var(--panel);
  border-radius:var(--r-sm);padding:9px 14px;font-size:14px;
}
#dropOverlay .filelist .sz{color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
#dropOverlay .warn{color:var(--warn);font-weight:600;margin-top:14px;font-size:14.5px}
body.dragging{cursor:copy}

/* ===========================================================
   TRANSLUCENT ADAPTIVE HEADER
   The bar is glass rather than a solid slab, and re-tones itself
   against whatever section is passing underneath it. Tone classes
   are set by chrome.js from the section's own computed background,
   so this works on all pages without per-page tagging.
   =========================================================== */
.site-header{
  /* OPAQUE, no backdrop-filter: the glass bar sampled the video underneath,
     and its composited layer repainted the corner a beat after the bar's own
     colour — the "corner lags" report. Solid paint owns every pixel, exactly
     like the original site's navbar. */
  background:var(--blue);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:none;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             box-shadow .18s var(--ease),color .18s var(--ease);
}

/* --- over the opening hero: ONE colour, light enough to read the video
       through, held steady the whole way down the hero --- */
.site-header.tone-dark{
  background:var(--blue);
  border-bottom-color:rgba(255,255,255,.16);
}

/* --- over a light section: invert to blue-on-white glass --- */
.site-header.tone-light{
  background:#fff;
  border-bottom-color:var(--line);
  box-shadow:0 1px 14px rgba(0,58,112,.08);
}
.site-header.tone-light .brand{color:var(--blue-dark)}
.site-header.tone-light .brand .b2{color:var(--muted)}
.site-header.tone-light .site-nav a{color:var(--blue-dark)}
.site-header.tone-light .site-nav a:hover,
.site-header.tone-light .site-nav a[aria-current="page"]{border-bottom-color:var(--blue)}
.site-header.tone-light .btn-quote{
  background:var(--blue);color:#fff;border-color:var(--blue);
}
.site-header.tone-light .btn-quote:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.site-header.tone-light .icon-btn{color:var(--blue-dark)}
.site-header.tone-light .icon-btn:hover{background:var(--blue-tint)}
/* the mobile drawer drops out of the bar, so it keeps its own solid ground */
@media(max-width:900px){
  .site-header.tone-light .site-nav{background:#fff;border-bottom:1px solid var(--line)}
  .site-header.tone-light .site-nav a{border-bottom-color:var(--line)}
  .site-header.tone-light .site-nav a:hover,
  .site-header.tone-light .site-nav a[aria-current="page"]{background:var(--blue-tint)}
}

/* ===========================================================
   SECTION RAIL — where you are in the page
   A hairline with one dot per section; the current one grows white.
   =========================================================== */
html{
  /* free scrolling: no snapping. scroll-padding only keeps a rail click or
     an anchor jump from parking its target underneath the bar. */
  scroll-padding-top:var(--sticky-h,68px);
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

.snap-rail{
  position:fixed;right:clamp(2px,0.7vw,10px);top:50%;transform:translateY(-50%);
  z-index:880;display:flex;flex-direction:column;align-items:center;
  gap:clamp(11px,1.5vh,18px);padding:16px 5px;
  /* the rail crosses every kind of section, so each dot carries a 1px ring in
     the opposite tone — that is what keeps it readable on white, on near-black
     and on a photo alike, rather than relying on fill colour alone */
  --rail-ink:#fff;
  --rail-halo:rgba(0,0,0,.5);
  --rail-ring:rgba(255,255,255,.7);
  color:var(--rail-ink);
  transition:color .4s var(--ease),opacity .3s var(--ease);
}
.snap-rail.tone-light{
  --rail-ink:var(--blue);
  --rail-halo:rgba(255,255,255,.95);
  --rail-ring:var(--blue);
}
.snap-rail.tone-light .rail-dot::after{opacity:.78}
.snap-rail.tone-light::before{opacity:.42}
.snap-rail::before{
  content:"";position:absolute;top:14px;bottom:14px;width:1px;
  background:var(--rail-ink);opacity:.32;
}
.rail-dot{
  position:relative;width:20px;height:20px;display:grid;place-items:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.rail-dot::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--rail-ink);opacity:.6;
  box-shadow:0 0 0 1px var(--rail-halo);
  transition:width .3s var(--ease),height .3s var(--ease),
             opacity .3s var(--ease),background-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.rail-dot:hover::after{opacity:.9}
.rail-dot:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}
/* current section: bigger, filled in the rail's own ink, ringed in the ground
   colour. White on dark sections; brand blue on light ones — a white-filled
   dot on a white section reads as an empty outline, not as "you are here". */
.rail-dot[aria-current="true"]::after{
  width:12px;height:12px;opacity:1;
  background:var(--rail-ink);
  box-shadow:0 0 0 2px var(--rail-ring),0 2px 10px rgba(0,0,0,.35);
}
.snap-rail.tone-light .rail-dot[aria-current="true"]::after{
  background:var(--blue);
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 2px 8px rgba(0,58,112,.3);
}
.rail-tip{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(6,16,26,.92);color:#fff;padding:6px 11px;border-radius:6px;
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.rail-dot:hover .rail-tip,.rail-dot:focus-visible .rail-tip{
  opacity:1;transform:translateY(-50%) translateX(0);
}
/* the chat bubble owns the bottom-right corner; keep clear of it on short screens */
@media(max-width:760px),(max-height:520px){
  .snap-rail{display:none}
}

/* ===========================================================
   GLASS NEEDS SOMETHING BEHIND IT
   A sticky header keeps its slot in the flow, so at scroll-top there is
   nothing under the bar but the body ground — backdrop-filter then blurs
   white and the bar washes out to unreadable grey. Pull the first section
   up under the header and pad its content back down, so the hero's own
   video/gradient is what the glass samples from the very first pixel.
   =========================================================== */
body > section:first-of-type{
  margin-top:calc(-1 * var(--sticky-h,68px));
  padding-top:var(--sticky-h,68px);
}

/* ===========================================================
   AI ASSISTANT PANEL (locked chrome)
   The chat bubble used to be decorative — a button with no handler. It now
   opens this panel, and so does anything carrying [data-chat-open], so a
   page can hand the reader straight into the assistant.
   The reply pipeline is not wired to a backend yet; the panel says so
   rather than pretending to answer.
   =========================================================== */
.chat-panel{
  position:fixed;right:clamp(14px,2.4vw,28px);bottom:calc(clamp(14px,2.4vw,28px) + 74px);
  z-index:940;width:min(370px,calc(100vw - 28px));
  max-height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px -24px rgba(0,30,58,.45),0 2px 10px rgba(0,30,58,.12);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
  transform-origin:100% 100%;
  transition:opacity .22s var(--ease),transform .22s var(--ease),
             visibility 0s linear .22s;
}
.chat-panel.open{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s;
}
.chat-head{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:14px 14px 14px 16px;background:var(--blue);color:#fff;
}
.chat-head .dot{
  width:8px;height:8px;border-radius:50%;background:#5cc795;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(92,199,149,.25);
}
.chat-head h3{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.chat-head p{margin:2px 0 0;font-size:11.5px;color:rgba(255,255,255,.8)}
.chat-close{
  margin-left:auto;flex-shrink:0;width:30px;height:30px;border-radius:8px;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color .18s var(--ease);
}
.chat-close:hover{background:rgba(255,255,255,.16)}
.chat-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.chat-log{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
  background:var(--off);
}
.chat-msg{
  max-width:88%;padding:10px 13px;border-radius:12px;
  font-size:13.5px;line-height:1.55;
}
.chat-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.me{background:var(--blue);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--off);flex-shrink:0}
.chat-chip{
  border:1px solid var(--line-strong);background:#fff;color:var(--blue-dark);
  border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.chat-chip:hover{border-color:var(--blue);background:var(--blue-tint)}
.chat-form{
  display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);
  background:#fff;flex-shrink:0;
}
.chat-form input{
  flex:1;min-width:0;padding:10px 12px;font:inherit;font-size:13.5px;
  border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);
}
.chat-form input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.chat-send{
  flex-shrink:0;width:40px;height:40px;border-radius:9px;border:0;
  background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color .18s var(--ease);
}
.chat-send:hover{background:var(--blue-dark)}
.chat-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:420px){
  .chat-panel{right:8px;left:8px;width:auto;bottom:88px}
}
@media(prefers-reduced-motion:reduce){
  .chat-panel{transition:opacity .01s,visibility 0s}
}

/* ===========================================================
   REAL LOGO (replaces the typed wordmark)
   The artwork ships in two recolours of the same SVG: white for the blue
   glass bar, the original blue/black for the white bar and the footer.
   Which header variant shows follows the bar's tone class.
   =========================================================== */
/* the two recolours sit stacked in one grid cell and CROSSFADE on the same
   .4s curve as the bar's background. A hard display swap changed the logo
   instantly while the glass behind it was still mid-fade, so for ~400ms the
   corner read as lagging behind the rest of the header. */
.brand{display:grid;align-items:center}
.brand img{
  grid-area:1/1;width:auto;height:34px;
  /* NO fade: any image crossfade reads as the corner trailing the bar */
  transition:none;
}
.brand .logo-dark{opacity:0}
.site-header.tone-light .brand .logo-light{opacity:0}
.site-header.tone-light .brand .logo-dark{opacity:1}
.f-logo img{display:block;width:auto;height:40px}
@media(max-width:560px){.brand img{height:28px}}

/* =========================================================== 
   YARDIM ASISTANI — canlı sitenin kendi stilleri, birebir
   =========================================================== */
:root { --sb-mavi:#005095; --sb-mavi-koyu:#003d72; }

#sb-balon{position:fixed;right:20px;bottom:20px;z-index:9998;width:58px;height:58px;
  border:0;border-radius:50%;background:var(--sb-mavi);color:#fff;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease}
#sb-balon:hover{background:var(--sb-mavi-koyu);transform:scale(1.06)}
#sb-balon svg{width:26px;height:26px}

#sb-panel{position:fixed;right:20px;bottom:20px;z-index:9999;width:370px;max-width:calc(100vw - 32px);
  height:540px;max-height:calc(100vh - 40px);background:#fff;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);display:none;flex-direction:column;overflow:hidden;
  font-family:inherit;font-size:14px}
#sb-panel.acik{display:flex}

#sb-baslik{background:var(--sb-mavi);color:#fff;padding:13px 16px;display:flex;
  align-items:center;justify-content:space-between;flex-shrink:0}
#sb-baslik b{font-size:14.5px;font-weight:600}
#sb-baslik small{display:block;font-size:11.5px;opacity:.85;font-weight:400;margin-top:1px}
#sb-kapat{background:none;border:0;color:#fff;cursor:pointer;font-size:24px;line-height:1;
  padding:0 2px;opacity:.85}
#sb-kapat:hover{opacity:1}

#sb-akis{flex:1;overflow-y:auto;padding:14px;background:#f6f8fa}
.sb-m{margin-bottom:11px;display:flex}
.sb-m.ben{justify-content:flex-end}
.sb-balonu{max-width:84%;padding:9px 13px;border-radius:14px;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word}
.sb-m.bot .sb-balonu{background:#fff;color:#1c2a35;border:1px solid #e3e8ee;border-bottom-left-radius:4px}
.sb-m.ben .sb-balonu{background:var(--sb-mavi);color:#fff;border-bottom-right-radius:4px}

.sb-eylem{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px 2px}
.sb-dugme{background:#fff;border:1px solid var(--sb-mavi);color:var(--sb-mavi);
  border-radius:16px;padding:6px 12px;font-size:12.5px;cursor:pointer;line-height:1.35;
  text-align:left;font-family:inherit}
.sb-dugme:hover{background:var(--sb-mavi);color:#fff}
.sb-link{display:inline-block;background:var(--sb-mavi);color:#fff!important;border:0;
  border-radius:16px;padding:7px 14px;font-size:12.5px;text-decoration:none!important;cursor:pointer}
.sb-link:hover{background:var(--sb-mavi-koyu)}

#sb-alt{border-top:1px solid #e3e8ee;padding:9px;display:flex;gap:8px;background:#fff;flex-shrink:0}
#sb-girdi{flex:1;border:1px solid #d6dde5;border-radius:20px;padding:9px 14px;font-size:13.5px;
  outline:none;font-family:inherit;resize:none;max-height:80px;line-height:1.4}
#sb-girdi:focus{border-color:var(--sb-mavi)}
#sb-gonder{background:var(--sb-mavi);border:0;border-radius:50%;width:38px;height:38px;
  color:#fff;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
#sb-gonder:hover{background:var(--sb-mavi-koyu)}
#sb-gonder:disabled{opacity:.45;cursor:default}
#sb-gonder svg{width:17px;height:17px}

#sb-dipnot{font-size:10.5px;color:#8b98a5;text-align:center;padding:0 9px 8px;background:#fff;flex-shrink:0}

.sb-yaziyor span{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;
  background:#9aa7b4;animation:sb-zipla 1.2s infinite}
.sb-yaziyor span:nth-child(2){animation-delay:.2s}
.sb-yaziyor span:nth-child(3){animation-delay:.4s}
@keyframes sb-zipla{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

@media(max-width:480px){
  #sb-panel{right:0;bottom:0;width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  #sb-balon{right:14px;bottom:14px}
}

/* ---------- help (?) placement ----------
   Desktop: round ? icon in the bar, straight to the FAQ.
   Mobile: the bar is tight, so the ? hides and "Sıkça Sorulan Sorular"
   lives inside the menu drawer as a regular item instead. */
.site-nav .nav-sss{display:none}
@media(max-width:900px){
  .icon-btn.help{display:none}
  .site-nav .nav-sss{display:block}
}

/* ---------- mobile tap comfort ----------
   Footer link lists and format chips sat under the ~44px comfortable touch
   size on phones. Spacing only — desktop untouched. */
@media(max-width:640px){
  .f-links a{display:block;padding:9px 0}
  .footer-bottom .socials a{padding:10px 8px;display:inline-block}
}

/* ===========================================================
   DROP PREVIEW MODAL
   A stray drop must never yank the visitor away mid-scroll: dropped files
   open here first — big preview, CTA pinned bottom-right — and the quote
   screen only opens on that explicit click.
   =========================================================== */
#dropModal{
  position:fixed;inset:0;z-index:960;display:none;
  background:rgba(4,16,28,.62);padding:clamp(10px,3vh,34px) clamp(10px,3vw,34px);
}
#dropModal.on{display:flex;align-items:center;justify-content:center}
.dm-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(980px,100%);max-height:100%;
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,20,40,.55);
}
.dm-head{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding:14px 16px 14px 20px;border-bottom:1px solid var(--line);
}
.dm-head h3{
  margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dm-close{
  margin-left:auto;flex-shrink:0;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
}
.dm-close:hover{background:var(--blue-tint)}
.dm-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.dm-stage{
  flex:1;min-height:240px;overflow:hidden;background:#f4f5f7;
  display:grid;place-items:center;
}
#dmCanvas{display:block;max-width:100%;max-height:min(58vh,600px);width:auto;height:auto}
#dmFallback{text-align:center;padding:40px 20px}
.dm-doc{
  width:120px;height:150px;margin:0 auto 16px;border-radius:10px;
  background:#fff;border:1px solid var(--line-strong);
  display:grid;place-items:center;position:relative;
  box-shadow:0 12px 30px -18px rgba(0,30,58,.4);
}
.dm-doc::before{
  content:"";position:absolute;top:0;right:0;width:26px;height:26px;
  background:var(--off);border-left:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);border-radius:0 10px 0 8px;
}
.dm-doc span{font-size:20px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
#dmDocName{margin:0 0 6px;font-weight:600;font-size:14.5px}
.dm-doc-note{margin:0;font-size:12.5px;color:var(--muted);max-width:42ch;margin-inline:auto}
.dm-files{
  display:flex;gap:8px;overflow-x:auto;flex-shrink:0;
  padding:10px 16px;border-top:1px solid var(--hair-2);
}
.dm-chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:7px 12px;font:inherit;cursor:pointer;text-align:left;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.dm-chip b{font-size:12.5px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-chip span{font-size:11px;color:var(--muted)}
.dm-chip:hover{border-color:var(--blue)}
.dm-chip.on{border-color:var(--blue);background:var(--blue-tint)}
.dm-warn{
  margin:0;padding:8px 20px;font-size:12.5px;flex-shrink:0;
  background:#f9f0d8;color:#7d5a10;
}
.dm-foot{
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;
  padding:12px 16px;border-top:1px solid var(--line);background:#fff;
}
.dm-cancel{
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  border-radius:9px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer;
}
.dm-cancel:hover{background:var(--off)}
.dm-cta{
  border:0;border-radius:9px;padding:12px 24px;font:inherit;font-size:15px;
  font-weight:700;color:#fff;background:var(--blue);cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(0,80,149,.55);
}
.dm-cta:hover{background:var(--blue-dark)}
.dm-cancel:focus-visible,.dm-cta:focus-visible,.dm-close:focus-visible,.dm-chip:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}


/* ===================== BAŞLIK AÇILIR MENÜLERİ =====================
   Alt sayfası olan menü başlıkları (Hizmetlerimiz, Kaynaklar) aşağı ok
   taşır ve üzerine gelince alt sayfalar açılır. Başlığın kendisi de
   bağlantıdır; menüyü beklemeden ana sayfasına gidilebilir.
   Kurallar dosyanın SONUNDA: .site-header.tone-light .site-nav a ile aynı
   özgüllükte olduğu için sıralama kazanmalı, yoksa açık panelde beyaz
   yazı beyaz zemine düşer. */
.nav-grup{position:relative;display:flex;align-items:center}
.nav-ust{display:inline-flex;align-items:center;gap:6px}
.nav-ok{
  width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8;
  transition:transform .18s var(--ease);
}
.nav-grup:hover .nav-ok,.nav-grup:focus-within .nav-ok{transform:rotate(180deg)}
/* imleç başlıktan panele geçerken aradaki boşlukta menü kapanmasın */
.nav-grup::before{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.site-header .site-nav .nav-alt{
  position:absolute;top:calc(100% + 10px);left:-12px;min-width:242px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 16px 38px rgba(0,32,64,.17);
  padding:8px;display:grid;gap:1px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s;
}
.nav-grup:hover .nav-alt,.nav-grup:focus-within .nav-alt{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s;
}
.site-header .site-nav .nav-alt a{
  color:var(--ink);font-size:14.5px;font-weight:500;white-space:nowrap;
  padding:9px 13px;border-radius:7px;border-bottom:0;
}
.site-header .site-nav .nav-alt a:hover,
.site-header .site-nav .nav-alt a:focus-visible{
  background:var(--blue-tint);color:var(--blue-dark);border-bottom:0;
}

@media(max-width:900px){
  /* Çekmecede hover yok: alt sayfalar girintili olarak hep görünür. */
  .nav-grup{display:block}
  /* Cekmecede grup basligi da normal bir satir olmali: desktop icin verilen
     inline-flex burada kalirsa baslik yalnizca kendi genisligi kadar yer kaplar
     ve alt cizgisi yarim kalir (diger satirlar tam genislikteyken). */
  .site-header .site-nav .nav-ust{display:flex;width:100%}
  .nav-ok{display:none}
  .nav-grup::before{display:none}
  .site-header .site-nav .nav-alt{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;padding:0;min-width:0;
    display:block;transition:none;
  }
  .site-header .site-nav .nav-alt a{
    display:block;color:rgba(255,255,255,.82);font-size:14px;border-radius:0;
    padding:12px clamp(16px,4vw,40px) 12px calc(clamp(16px,4vw,40px) + 18px);
    border-bottom:1px solid rgba(255,255,255,.1);white-space:normal;
  }
  .site-header .site-nav .nav-alt a:hover{background:rgba(255,255,255,.08);color:#fff}
  /* alt maddelerle çekmece uzuyor: sabit 340px yerine ekrana göre kaydırılabilir */
  .site-nav.open{max-height:78vh;overflow-y:auto}
  /* Sayfa kaydırılınca başlık AÇIK TONA geçiyor ve çekmece beyaz oluyor.
     Alt maddelerin rengi yukarıda beyaza sabitlendiği için o durumda beyaz
     zemine beyaz yazı düşüyordu; açık tonda üst maddelerle aynı koyu maviye
     dönmeleri gerekir. */
  .site-header.tone-light .site-nav .nav-alt a{
    color:var(--blue-dark);border-bottom-color:var(--line);
  }
  .site-header.tone-light .site-nav .nav-alt a:hover{
    background:var(--blue-tint);color:var(--blue-dark);
  }
}


/* ===================== KAPANIŞ CTA IZGARASI =====================
   Solda metin, sağda teklif kartı. Daha önce her sayfada satır içi stille
   kuruluydu; satır içi stil medya sorgusuyla ezilemediği için dar ekranda
   kart 320 px tabanını koruyup sayfayı yatay taşırıyordu. Artık sınıf:
   dar ekranda tek sütuna iner, kart metnin altında tam görünür. */
.cta-grid{
  display:grid;grid-template-columns:1fr minmax(320px,440px);
  gap:40px;align-items:center;
}
.cta-grid.ust{align-items:start}
@media(max-width:860px){
  .cta-grid{grid-template-columns:1fr;gap:26px}
  /* kart kendi sütununda tam genişlesin, 320px taban dar ekranı zorlamasın */
  .cta-grid > *{min-width:0}
  .cta-grid .quote-block{max-width:520px;width:100%}
}


/* ===================== OKUMA İLERLEME ÇUBUĞU =====================
   Yalnızca blog yazılarında görünür (chrome.js .art-tags varsa ekler).
   Ölçüler ana sitedeki bardan alındı (blog.detay.css): 6px yükseklik,
   düz mavi dolgu, 0.1s ease-out. Tek fark oluk: ana sitede saydam, burada
   çok hafif bir iz var — "ne kadar kaldığı" ancak kalan kısım görünürse
   okunur; saydam olukta yalnızca okunan kısım görünür.
   z-index 890 — içeriğin üstünde, yapışkan başlık (900), pencereler (1000)
   ve sohbet panelinin altında, yani hiçbir kontrolü örtmez. */
.okuma-bar{
  position:fixed;left:0;right:0;bottom:0;height:6px;z-index:890;
  background:rgba(0,80,149,.12);pointer-events:none;
}
.okuma-bar i{
  display:block;height:100%;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .1s ease-out;
}
@media (prefers-reduced-motion:reduce){.okuma-bar i{transition:none}}


/* ===================== GÖRSELLİ KART =====================
   Üstte görsel şeridi, altta içerik. Oran blog kartlarıyla aynı (1296/460)
   ki iki sayfadaki kartlar aynı ailedenmiş gibi dursun.
   .cizim: o yöntemin fotoğrafı yok, rehberin kendi çizimi mavi panelde
   ortalanıyor — kart ızgarası bozulmasın diye. */
a.card.gorselli{padding:0;overflow:hidden;display:flex;flex-direction:column}
.gorselli .gk-foto{display:block;aspect-ratio:1296/460;background:var(--panel);overflow:hidden}
.gorselli .gk-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease);
}
a.card.gorselli:hover .gk-foto img{transform:scale(1.045)}
.gorselli .gk-foto.cizim{background:var(--blue-tint);display:grid;place-items:center;padding:14px 18px}
.gorselli .gk-foto.cizim img{width:auto;max-width:100%;height:100%;object-fit:contain}
a.card.gorselli:hover .gk-foto.cizim img{transform:none}
.gorselli .gk-govde{padding:18px 22px 20px;display:flex;flex-direction:column;flex:1}
.gorselli .gk-govde .chip-sec{align-self:flex-start}
.gorselli .gk-govde h3{font-size:16.5px;line-height:1.38}
.gorselli .gk-govde p{flex:1}
.gorselli .gk-govde .meta{margin-top:14px}
@media(prefers-reduced-motion:reduce){.gorselli .gk-foto img{transition:none}}

/* grid-3'un 270px tabani genis ekranda 4 sutuna dusuyor ve gorsel bandi
   275x97'ye ininceliyor; 320px taban 3 sutunda tutuyor (~370x131). */
.grid.gorselli-izgara{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}