/* ═══════════════════════════════════════════
   berkant.xyz — hizmet sayfaları ortak tasarım
   izmir-web-tasarim.html tasarım dilinden türetildi
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* ═══ TEMA TOKENS ═══ */
:root{
  --bg-outer:   #efefef;
  --bg-shell:   #ffffff;
  --bg-loader:  #ffffff;
  --bg-lhdr:    #f5f5f5;
  --bg-navy:    #0d1b3e;
  --ink:        #111111;
  --ink-mid:    rgba(27,5,70,.95);
  --ink-dim:    rgba(17,17,17,.68);
  --ink-faint:  rgba(17,17,17,.81);
  --rule:       rgba(17,17,17,.06);
  --rule-med:   rgba(17,17,17,.09);
  --bar-fill:   #111111;
  --shadow:     0 0 60px rgba(0,0,0,.07);
  --yellow:     #fde68a;
  --loader-txt: rgba(17,17,17,.5);
  --loader-bar: rgba(17,17,17,.07);
  --svc-border: rgba(17,17,17,.18);
  --svc-hover-bg:#111;
  --svc-hover-ink:#fff;
  --mono-color: rgba(24,24,26,.95);
  --faq-q:      #070f30;
  --faq-a:      rgba(17,17,17,.62);
  --clink-border:rgba(17,17,17,.2);
  --px:clamp(1.6rem,7vw,3.2rem);
  --py:clamp(1rem,5vw,2rem);
}


body{
  background-color:var(--bg-outer);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background 1.8s ease;
}
/* loading tamamlanınca arka plan sayfanın kendi rengine döner */
body.vis{background-color:var(--page-bg,#ff9513)}

/* ═══ MODE PICKER ═══ */
#picker{
  position:fixed;inset:0;z-index:199999;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:#fff;
  transition:opacity .55s ease;
}
#picker.gone{opacity:0;pointer-events:none}
#picker-card{
  display:flex;flex-direction:column;align-items:center;gap:2.2rem;
  border:4px solid #111;border-radius:28px;
  padding:clamp(2.2rem,6vw,3.6rem) clamp(1.6rem,6vw,3.6rem);
  max-width:100%;
}
#picker-label{
  font-family:'DM Mono',monospace;font-size:14px;letter-spacing:.35em;
  font-weight:500;text-transform:uppercase;color:rgba(17,17,17,.85);
}
#picker-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,5vw,2.8rem);font-weight:700;line-height:1.2;
  text-align:center;color:#111;max-width:28rem;padding:0 2rem;
}
#picker-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;padding:0 2rem}
.picker-btn{
  font-size:16px;font-weight:500;font-family:'DM Sans',sans-serif;
  border:3px solid rgba(17,17,17,.85);background:none;cursor:pointer;
  padding:.75rem 1.6rem;border-radius:32px;
  display:flex;align-items:center;gap:.6rem;color:#111;
  transition:background .18s,color .18s,border-color .18s;
}
.picker-btn:hover{background:#111;color:#fff;border-color:#111}
.picker-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
#picker-note{font-size:14px;font-weight:500;color:rgba(17,17,17,.5)}

/* ═══ LOADING ═══ */
#loader{
  position:fixed;inset:0;background:var(--bg-loader);z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  transition:opacity .5s ease;
}
#loader.done{opacity:0;pointer-events:none}
#loader-inner{
  width:min(340px,80vw);
  border:1px solid var(--ink-faint);border-radius:6px;overflow:hidden;
}
#loader-header{
  background:var(--bg-lhdr);padding:.5rem .9rem;
  display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--ink-faint);
}
#loader-header span{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);display:inline-block}
#loader-body{
  padding:1.2rem;font-family:'DM Mono',monospace;font-size:11px;
  color:var(--loader-txt);line-height:2;min-height:120px;background:var(--bg-loader);
}
#loader-body .line{opacity:0;transform:translateY(4px);display:block}
#loader-body .line.vis{opacity:1;transform:none;transition:opacity .3s,transform .3s}
#loader-bar-wrap{height:2px;background:var(--loader-bar);position:relative;overflow:hidden}
#loader-bar-fill{height:100%;width:0%;background:var(--bar-fill);transition:width .05s linear}
#loader-name{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.3em;
  color:var(--ink-dim);text-transform:uppercase;
}

/* ═══ SHELL (tarayıcı penceresi) ═══ */
.shell{
  background:var(--bg-shell);
  border:1px solid #000;
  min-height:100svh;
  width:calc(100% - 2rem);max-width:768px;
  border-radius:14px;
  margin:1rem auto 3rem;
  box-shadow:var(--shadow);
  opacity:0;transition:opacity .4s ease;
  position:relative;overflow:clip;
}
.shell.vis{opacity:1}

/* ═══ BROWSER CHROME ═══ */
.bbar{
  position:sticky;top:0;z-index:500;
  display:flex;align-items:center;gap:.8rem;
  padding:.55rem .9rem;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--rule-med);
}
.bdots{display:flex;gap:6px;flex-shrink:0}
.bdots i{width:11px;height:11px;border-radius:50%;display:block}
.bdots i:nth-child(1){background:#f26d5f}
.bdots i:nth-child(2){background:#f2ce4b}
.bdots i:nth-child(3){background:#63c987}
.btab{
  display:flex;align-items:center;gap:.45rem;flex-shrink:0;
  font-family:'DM Mono',monospace;font-size:13px;color:var(--ink-dim);
  background:rgba(17,17,17,.05);
  padding:.35rem .8rem;border-radius:8px;
}
.btools{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:.15rem;
  background:rgba(17,17,17,.05);
  border:1px solid var(--rule-med);
  border-radius:999px;padding:.3rem .6rem;
}
.btools .bicon{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  color:var(--ink-dim);flex-shrink:0;
}
.btools .bicon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.baddr{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:.55rem;
  background:rgba(17,17,17,.05);
  border-radius:999px;padding:.32rem .85rem;
  font-family:'DM Mono',monospace;font-size:10.5px;color:var(--ink-dim);
  white-space:nowrap;overflow:hidden;
}
.bfav{font-weight:700;color:#4285f4;flex-shrink:0;font-family:'DM Sans',sans-serif}
.burl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bstar{width:14px;height:14px;flex-shrink:0;stroke:var(--ink-dim);fill:none;stroke-width:2;stroke-linejoin:round}
@media (max-width:640px){.btab{display:none}}

/* ═══ MASAÜSTÜ ÖĞELERİ ═══ */
#desk{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  display:none;opacity:0;transition:opacity 1s ease .4s;
}
body.vis #desk{opacity:1}
@media (min-width:1024px){#desk{display:block}}
.desk-icon{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  animation:deskfloat 7s ease-in-out infinite;
}
.di-2{animation-delay:1.4s}.di-3{animation-delay:2.8s}.di-4{animation-delay:.7s}
.di-glyph{font-size:36px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.28))}
.di-name{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.04em;color:#fff;
  background:rgba(17,17,17,.55);
  padding:.15rem .5rem;border-radius:4px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.di-1{top:11vh;left:3.5vw}
.di-2{top:46vh;left:5.5vw}
.di-3{bottom:14vh;left:3.5vw}
.di-4{top:15vh;right:3.5vw}
@keyframes deskfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ═══ SCROLLBAR ═══ */
#scrollbar{
  display:none;
  position:fixed;top:calc(1rem + 55px);bottom:62px;
  right:calc(50% - 384px + 6px);
  width:9px;border-radius:999px;
  background:rgba(17,17,17,.06);
  z-index:600;pointer-events:auto;cursor:pointer;
  opacity:0;transition:opacity .6s ease .3s;
}
body.vis #scrollbar{opacity:1}
#sb-thumb{
  position:absolute;top:0;left:0;width:100%;
  border-radius:999px;background:rgba(17,17,17,.38);
  cursor:grab;pointer-events:auto;transition:background .2s;
}
#sb-thumb:hover{background:rgba(17,17,17,.55)}
#scrollbar.drag #sb-thumb{cursor:grabbing;background:rgba(17,17,17,.6)}
@media (min-width:800px){
  #scrollbar{display:block}
  html{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar{display:none;width:0;height:0}
}

/* ═══ PROGRESS (mobil) ═══ */
#bar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:min(768px,100%);height:2px;background:transparent;
  z-index:9999;pointer-events:none;
}
#bar::after{content:'';display:block;height:100%;width:var(--bw,0%);background:#f6a45c;transition:width .06s linear}
@media (min-width:768px){#bar{display:none}}

/* ═══ TOKENS — içerik ═══ */
.acc{
  width:44px;height:4px;border-radius:2px;background:var(--page-bg,#ff9513);
  display:block;margin-bottom:1rem;
}

/* ═══ BREADCRUMB ═══ */
.bcrumb{
  padding:1.1rem var(--px) 0;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--ink-dim);
}
.bcrumb a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--clink-border)}
.bcrumb a:hover{color:var(--ink);border-color:var(--ink)}

/* ═══ SAYFA BAŞLIĞI ═══ */
.pg-head{
  padding:clamp(2.5rem,8vw,4.5rem) var(--px) clamp(1.8rem,5vw,2.6rem);
  text-align:left;
}
.pg-head h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,8vw,3.6rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.02;color:#070f30;
  margin:.9rem 0 1.3rem;
}
.pg-head .lead{
  font-size:clamp(1.05rem,2.2vw,1.2rem);line-height:1.75;
  color:var(--ink);font-weight:400;max-width:36rem;
}
.pg-head p + p{margin-top:.9rem;font-weight:300;color:var(--ink-dim)}

/* ═══ SECTION'LAR ═══ */
main > section{
  padding:clamp(1.9rem,5vw,2.9rem) var(--px);
  border-top:1px solid var(--rule);
}
main > section > h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,3.6vw,1.9rem);
  font-weight:700;line-height:1.25;color:var(--faq-q);
  margin-bottom:clamp(1rem,3vw,1.5rem);
}
main > section > p{
  font-size:clamp(1rem,2.1vw,1.12rem);line-height:1.75;
  color:var(--ink);font-weight:300;max-width:40rem;
}
main > section > p + p{margin-top:1.1rem}
main > section > p strong{font-weight:500;color:var(--faq-q)}

/* içerik linkleri */
main a{
  color:var(--faq-q);font-weight:400;text-decoration:none;
  border-bottom:1px solid var(--clink-border);
  transition:border-color .2s,color .2s;
}
main a:hover{border-color:var(--ink);color:var(--ink)}

/* ═══ LİSTELER ═══ */
main ul{list-style:none;margin:.6rem 0 .4rem;display:flex;flex-direction:column;gap:.95rem;max-width:40rem}
main ul li{
  position:relative;padding-left:1.5rem;
  font-size:clamp(.98rem,2vw,1.08rem);line-height:1.72;
  color:var(--ink);font-weight:300;
}
main ul li::before{
  content:'';position:absolute;left:.15rem;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:var(--d,#111);
}
main ul li:nth-of-type(8n+1){--d:#f59e0b}
main ul li:nth-of-type(8n+2){--d:#ec4899}
main ul li:nth-of-type(8n+3){--d:#8b5cf6}
main ul li:nth-of-type(8n+4){--d:#10b981}
main ul li:nth-of-type(8n+5){--d:#3b82f6}
main ul li:nth-of-type(8n+6){--d:#ef4444}
main ul li:nth-of-type(8n+7){--d:#14b8a6}
main ul li:nth-of-type(8n)  {--d:#f97316}
main ul li strong{font-weight:500;color:var(--faq-q)}

main ol{
  list-style:none;counter-reset:step;
  margin:.6rem 0 .4rem;display:flex;flex-direction:column;gap:1.1rem;max-width:40rem;
}
main ol li{
  counter-increment:step;position:relative;
  padding-left:2.9rem;
  font-size:clamp(.98rem,2vw,1.08rem);line-height:1.72;
  color:var(--ink);font-weight:300;
}
main ol li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-family:'DM Mono',monospace;font-size:12px;font-weight:500;
  color:var(--faq-q);
  border:1px solid var(--svc-border);border-radius:8px;
  padding:.32rem .5rem;line-height:1;
}
main ol li strong{font-weight:500;color:var(--faq-q)}

/* ═══ SSS ═══ */
main > section > h3{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1rem,2.2vw,1.12rem);font-weight:600;color:var(--faq-q);
  margin:clamp(1.7rem,4vw,2.3rem) 0 .5rem;
  padding-top:1.3rem;border-top:1px solid var(--rule-med);
  max-width:40rem;
}
main > section > h3:first-of-type{border-top:0;padding-top:.3rem}
main > section > h3 + p{
  font-size:clamp(.9rem,2vw,1.02rem);line-height:1.85;
  color:var(--faq-a);font-weight:300;max-width:38rem;
}

/* ═══ CTA BÖLÜMÜ ═══ */
.s-cta{background:rgba(17,17,17,.015)}
.clinks{margin-top:clamp(1.4rem,4vw,2.2rem);display:flex;flex-direction:column;gap:.5rem}
.clinks a{
  font-family:'DM Mono',monospace;
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--ink);text-decoration:none;
  border:0;border-bottom:1px solid var(--clink-border);
  padding-bottom:.15rem;display:inline-block;
  transition:border-color .2s;width:fit-content;font-weight:400;
}
.clinks a:hover{border-color:var(--ink);color:var(--ink)}

/* ═══ MESAJ KUTUSU: yaz → WhatsApp ═══ */
.wabox{
  max-width:36rem;
  margin:clamp(1.6rem,4vw,2.6rem) 0 0;
  border:1px solid rgba(17,17,17,.18);
  border-radius:10px;overflow:hidden;
  background:rgba(17,17,17,.02);
  transition:border-color .25s;
}
.wabox:focus-within{border-color:rgba(17,17,17,.45)}
.wabox-hd{
  display:flex;align-items:center;gap:.45rem;
  padding:.45rem .8rem;border-bottom:1px solid rgba(17,17,17,.08);
}
.wabox-hd span{
  font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(17,17,17,.45);
}
.wabox-hd i{width:7px;height:7px;border-radius:50%;display:inline-block}
.wabox-hd i:nth-child(1){background:#f26d5f}
.wabox-hd i:nth-child(2){background:#f2ce4b}
.wabox-hd i:nth-child(3){background:#63c987}
#wamsg{
  display:block;width:100%;min-height:6.2rem;
  padding:.85rem .9rem;border:0;background:transparent;resize:vertical;
  font-family:'DM Mono',monospace;font-size:13px;line-height:1.75;color:var(--ink);
}
#wamsg:focus{outline:none}
#wamsg::placeholder{color:rgba(17,17,17,.35)}
.wabox-ft{padding:.55rem .8rem .8rem}
#wasend{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.05rem;
  border:1px solid rgba(37,211,102,.55);border-radius:999px;
  background:rgba(37,211,102,.1);color:#128c7e;
  font-family:'DM Mono',monospace;font-size:15px;font-weight:700;
  letter-spacing:normal;text-transform:lowercase;cursor:pointer;
  transition:background .2s,transform .2s;
}
#wasend:hover{background:rgba(37,211,102,.22);transform:translateY(-1px)}
#wasend:active{transform:translateY(0)}
#wasend svg{width:15px;height:15px;fill:currentColor}

/* ═══ FOOTER ═══ */
main > footer{
  padding:clamp(1.9rem,5vw,2.9rem) var(--px) clamp(2.4rem,6vw,3.4rem);
  border-top:1px solid var(--rule);
}
main > footer h2{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:500;
  margin-bottom:1rem;
}
.rel-tags{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0}
.rel-tags li{padding:0}
.rel-tags li::before{display:none}
.rel-tags a{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.9rem;font-weight:500;
  color:var(--ink);text-decoration:none;border:0;
  border:2px solid var(--svc-border);
  border-radius:999px;padding:.5rem 1.05rem;line-height:1.3;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.rel-tags a:hover{background:var(--svc-hover-bg);color:var(--svc-hover-ink);border-color:var(--svc-hover-bg);transform:translateY(-2px)}
.rel-tags a::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--d,#111);flex-shrink:0;
}
.rel-tags li:nth-of-type(8n+1) a{--d:#f59e0b}
.rel-tags li:nth-of-type(8n+2) a{--d:#ec4899}
.rel-tags li:nth-of-type(8n+3) a{--d:#8b5cf6}
.rel-tags li:nth-of-type(8n+4) a{--d:#10b981}
.rel-tags li:nth-of-type(8n+5) a{--d:#3b82f6}
.rel-tags li:nth-of-type(8n+6) a{--d:#ef4444}
.rel-tags li:nth-of-type(8n+7) a{--d:#14b8a6}
.rel-tags li:nth-of-type(8n)   a{--d:#f97316}
.sig{
  margin-top:clamp(2.4rem,6vw,3.4rem);
  font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.2em;
  color:var(--ink-dim);text-transform:uppercase;line-height:2;font-weight:400;
}

/* ═══ REVEAL ═══ */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}

/* ═══ STICKY DOCK ═══ */
#dock{
  position:fixed;left:50%;bottom:1rem;
  transform:translateX(-50%) translateY(-14px);
  display:flex;align-items:center;padding:.3rem;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:3px solid rgba(17,17,17,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
  z-index:9990;
}
#dock.vis{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #dock{background:rgba(255,255,255,.94)}
}
#dock a{
  display:flex;align-items:center;gap:.45rem;
  font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:.5rem .95rem;border-radius:999px;
  transition:background .18s;
}
#dock-wa:hover{background:rgba(37,211,102,.15)}
#dock-call:hover{background:rgba(242,206,75,.25)}
#dock svg{width:15px;height:15px;flex-shrink:0}
#dock-wa svg{fill:#25d366}
#dock-call svg{stroke:currentColor;fill:none;stroke-width:1.8}
.dock-sep{width:1px;height:16px;background:var(--rule-med);flex-shrink:0}

/* ═══ QR MODAL ═══ */
#qr-modal{
  position:fixed;inset:0;z-index:99990;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  background:rgba(10,10,10,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#qr-modal.open{opacity:1;pointer-events:auto}
#qr-card{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(17,17,17,.08);
  border-radius:20px;padding:1.6rem 1.8rem;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  transform:translateY(10px) scale(.97);
  transition:transform .3s ease;
}
#qr-modal.open #qr-card{transform:none}
#qr-status{
  font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:.25em;text-transform:uppercase;
  color:#10b981;margin-bottom:1rem;
}
#qr-card img{width:170px;height:170px;border-radius:12px;display:block;margin:0 auto;background:#fff;padding:8px}
#qr-num{
  font-family:'DM Mono',monospace;font-size:.95rem;font-weight:500;
  letter-spacing:.08em;color:var(--ink);margin-top:1rem;
}
#qr-close{
  margin-top:1.1rem;
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--clink-border);border-radius:999px;
  color:var(--ink-dim);padding:.45rem 1.2rem;cursor:pointer;
  transition:color .18s,border-color .18s;
}
#qr-close:hover{color:var(--ink);border-color:var(--ink)}