/* =========================================================
   Protan - pazarlama sitesi ortak stil
   Harici font/CDN yok (CLAUDE.md Bölüm 7 yasağı ile uyumlu)
   ========================================================= */

:root{
  --ink:#0B0B0C; --ink-2:#16181D; --ink-3:#2A2C31;
  --slate:#5A5C63; --slate-2:#8A8D94; --slate-3:#B6B8BE;
  --line:#E4E4E7; --line-2:#F0F0F1;
  --bg:#FFFFFF; --soft:#F7F7F8; --soft-2:#FBFBFC;
  /* Vurgu - KISITLI. Logo dışında asla yüzey dolgusu olmaz.
     İzinli: eyebrow çizgisi, aktif link altı, sayı vurgusu, tekil işaret çizgisi. */
  --accent:#C2481B; --accent-2:#E0673A; --accent-dark:#9E3A15; --accent-soft:#FBF0EB;
  --ok:#12805C; --ok-soft:#E7F5F0;
  --danger:#B4231F;
  --r:12px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(11,11,12,.05), 0 6px 18px rgba(11,11,12,.05);
  --sh-2:0 2px 4px rgba(11,11,12,.05), 0 18px 42px rgba(11,11,12,.08);
  --sh-3:0 4px 8px rgba(11,11,12,.06), 0 32px 72px rgba(11,11,12,.12);
  --max:1160px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.prose{max-width:760px}
a{color:inherit;text-decoration:none}
/* gövde metni içindeki link - vurgu rengi değil, altı çizili siyah */
.ilink{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--slate-3);transition:.14s}
.ilink:hover{text-decoration-color:var(--ink)}
button{font:inherit}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.024em;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.035em;line-height:1.06}
h2{font-size:clamp(1.65rem,3.5vw,2.5rem);letter-spacing:-.03em}
h3{font-size:1.06rem}
p{color:var(--slate)}
code{font-family:var(--mono);font-size:.86em;background:var(--soft);border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)}
.lead{font-size:1.1rem;max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
section{padding:92px 0}
@media(max-width:700px){section{padding:60px 0}}
.sec-head{max-width:66ch;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2{margin:12px 0 14px}
.soft-bg{background:var(--soft-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}

/* reveal */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.04s}.rv.d2{transition-delay:.08s}.rv.d3{transition-delay:.12s}
.rv.d4{transition-delay:.16s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.94rem;
  padding:12px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.16s ease;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(11,11,12,.22),0 6px 18px rgba(11,11,12,.14)}
.btn-primary:hover{background:var(--ink-2)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--slate-2);background:var(--soft-2)}
.btn-lg{padding:15px 26px;font-size:1rem;border-radius:10px}

/* nav */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.84);
  backdrop-filter:saturate(1.8) blur(14px);border-bottom:1px solid transparent;transition:.2s}
header.stuck{border-bottom-color:var(--line-2);box-shadow:0 1px 20px rgba(11,11,12,.05)}
nav{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.logo img{display:block;transition:opacity .18s}
.logo:hover img{opacity:.72}
.nav-links{display:flex;gap:22px}
.nav-links > a{font-size:.92rem;color:var(--slate);font-weight:500;position:relative;padding:4px 0}
.nav-links > a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links > a:hover{color:var(--ink)}
.nav-links > a:hover::after,.nav-links > a.on::after{transform:scaleX(1)}
.nav-links > a.on{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta .login{font-size:.92rem;font-weight:600;color:var(--slate)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:16px;height:1.8px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.8px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.mnav{display:none;border-top:1px solid var(--line-2);background:#fff;padding:14px 0 22px}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 0;font-weight:500;border-bottom:1px solid var(--line-2)}
.mnav .btn{width:100%;margin-top:16px}
@media(max-width:960px){.nav-links,.nav-cta{display:none}.burger{display:flex}}

/* hero */
.hero{position:relative;padding:76px 0 70px;overflow:hidden;background:linear-gradient(180deg,#fff,var(--soft-2))}
.hero::before{content:"";position:absolute;inset:-20% 40% auto -10%;height:80%;
  background:radial-gradient(closest-side,rgba(11,11,12,.045),transparent 72%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(11,11,12,.06) 1px,transparent 0);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 60% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 60% at 60% 30%,#000 30%,transparent 78%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:16px 0 18px}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;
  background:var(--ink);border-radius:2px}
.hero .lead{font-size:1.13rem}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}
.link-plain{display:inline-flex;align-items:center;padding:15px 10px;font-size:.95rem;font-weight:600;
  color:var(--slate-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.link-plain:hover{color:var(--ink);text-decoration-color:var(--slate-2)}

/* mockup */
.mock{border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-3);border:1px solid var(--line);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--soft);border-bottom:1px solid var(--line-2)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#DEDEE1;display:block;flex:none}
.mock-url{margin-left:10px;font-size:.72rem;color:var(--slate-2);background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:4px 12px;display:flex;align-items:center;gap:6px;font-family:var(--mono)}
.mock-url svg{width:10px;height:10px;stroke:var(--ok);fill:none;stroke-width:2}
.m-nav{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.m-logo{width:58px;height:11px;border-radius:3px;background:var(--ink);transition:.4s}
.m-links{margin-left:auto;display:flex;gap:10px}
.m-links i{width:30px;height:7px;border-radius:3px;background:var(--line);display:block}
.m-hero{padding:28px 20px;color:#fff;transition:background .45s ease}
.m-hero .t1{width:74%;height:15px;border-radius:4px;background:rgba(255,255,255,.94);margin-bottom:9px}
.m-hero .t2{width:50%;height:15px;border-radius:4px;background:rgba(255,255,255,.7);margin-bottom:16px}
.m-hero .t3{width:66%;height:7px;border-radius:3px;background:rgba(255,255,255,.32);margin-bottom:6px}
.m-hero .t4{width:46%;height:7px;border-radius:3px;background:rgba(255,255,255,.32)}
.m-hero .cta{margin-top:18px;width:100px;height:28px;border-radius:7px;transition:.45s}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:18px}
.m-card{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.m-card .img{height:46px;background:linear-gradient(135deg,#F1F1F2,#E4E4E7)}
.m-card .meta{padding:9px}
.m-card .meta i{display:block;height:6px;border-radius:3px;background:var(--line);margin-bottom:5px}
.m-card .meta i:last-child{width:58%;margin:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ok);opacity:.5;animation:pl 2s ease-out infinite}
@keyframes pl{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.18s;height:100%}
.card:hover{border-color:var(--slate-3);box-shadow:var(--sh-1)}
.card h3{margin-bottom:7px}
.card p{font-size:.92rem}
.ico{width:40px;height:40px;border-radius:10px;background:var(--soft);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.ico svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* sector cards */
.sector{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;transition:.18s;height:100%}
.sector:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.sector .st{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:12px}
.sector h3{font-size:1.2rem;margin-bottom:8px}
.sector p{font-size:.92rem;margin-bottom:16px}
.sector ul{list-style:none;display:grid;gap:7px;font-size:.87rem;color:var(--ink-3);margin-bottom:18px}
.sector li{display:flex;gap:8px}
.sector li::before{content:"-";color:var(--slate-3);flex:none}
.sector .go{font-size:.9rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.sector:hover .go{gap:9px}

/* dark */
.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:auto -10% -40% 30%;height:70%;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.dark .wrap{position:relative;z-index:1}
.dark h2,.dark h3{color:#fff}
.dark p{color:#A1A3A9}
.dark .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
.dark .card:hover{border-color:rgba(255,255,255,.22);box-shadow:none}
.dark .ico{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.dark .ico svg{stroke:#fff}
.dark .eyebrow{color:#A1A3A9}

/* editor demo */
.demo{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
@media(max-width:900px){.demo{grid-template-columns:1fr}}
.demo-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.demo-panel .hd{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:9px;
  font-size:.85rem;font-weight:600;background:var(--soft-2)}
.demo-panel .hd svg{width:15px;height:15px;stroke:var(--slate);fill:none;stroke-width:1.8}
.slist{padding:10px;display:grid;gap:7px}
.sitem{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:grab;transition:.14s;user-select:none}
.sitem:hover{border-color:var(--slate-3);background:var(--soft-2)}
.sitem.drag{opacity:.4}
.sitem.over{border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,11,12,.08)}
.sitem.hidden{opacity:.45}
.sitem .gr{display:grid;grid-template-columns:repeat(2,2px);gap:2px;flex:none}
.sitem .gr i{width:2px;height:2px;background:var(--slate-3);border-radius:50%;display:block}
.sitem .nm{font-size:.88rem;font-weight:500;flex:1}
.sitem .tp{font-size:.7rem;color:var(--slate-2);font-family:var(--mono)}
.sitem .eye{background:none;border:0;cursor:pointer;padding:3px;display:flex;flex:none;border-radius:5px}
.sitem .eye:hover{background:var(--line-2)}
.sitem .eye svg{width:15px;height:15px;stroke:var(--slate-2);fill:none;stroke-width:1.7}
.demo-hint{padding:12px 18px;border-top:1px solid var(--line-2);font-size:.79rem;color:var(--slate-2);background:var(--soft-2)}
.demo-prev{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;min-height:440px}
.pv-sec{border-bottom:1px solid var(--line-2);animation:pop .28s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pv-hero{padding:34px 26px;background:linear-gradient(150deg,#141F35,#2A4269);color:#fff}
.pv-hero .a{width:66%;height:17px;background:rgba(255,255,255,.94);border-radius:4px;margin-bottom:10px}
.pv-hero .b{width:44%;height:17px;background:rgba(255,255,255,.66);border-radius:4px;margin-bottom:16px}
.pv-hero .c{width:56%;height:8px;background:rgba(255,255,255,.3);border-radius:3px;margin-bottom:6px}
.pv-hero .d{width:100px;height:30px;background:rgba(255,255,255,.92);border-radius:8px;margin-top:18px}
.pv-cols{display:grid;gap:12px;padding:24px 26px}
.pv-cols.c2{grid-template-columns:1fr 1fr}
.pv-cols.c3{grid-template-columns:repeat(3,1fr)}
.pv-blk{border:1px solid var(--line-2);border-radius:8px;padding:13px;background:var(--soft-2)}
.pv-blk .im{height:52px;border-radius:6px;background:linear-gradient(135deg,#EFEFF0,#E0E0E3);margin-bottom:10px}
.pv-blk i{display:block;height:7px;border-radius:3px;background:var(--line);margin-bottom:6px}
.pv-blk i:last-child{width:62%;margin:0}
.pv-band{padding:26px;text-align:center;background:var(--soft)}
.pv-band .a{width:52%;height:13px;border-radius:4px;background:var(--slate-3);margin:0 auto 10px}
.pv-band .b{width:120px;height:30px;border-radius:8px;background:var(--ink);margin:0 auto}
.pv-txt{padding:24px 26px}
.pv-txt i{display:block;height:8px;border-radius:3px;background:var(--line);margin-bottom:8px}
.pv-txt i:first-child{width:40%;height:12px;margin-bottom:14px}
.pv-txt i:last-child{width:70%}
.pv-form{padding:24px 26px;display:grid;gap:9px}
.pv-form .f{height:34px;border-radius:8px;border:1px solid var(--line);background:var(--soft-2)}
.pv-form .s{height:34px;width:110px;border-radius:8px;background:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:22px}}
.step{padding-top:22px;border-top:2px solid var(--ink)}
.step .n{font-size:.76rem;font-weight:700;color:var(--slate-2);letter-spacing:.1em;margin-bottom:9px;font-family:var(--mono)}
.step h3{margin-bottom:7px}
.step p{font-size:.92rem}

/* themes */
.tpl-wrap{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
@media(max-width:880px){.tpl-wrap{grid-template-columns:1fr}}
.tpl-list{display:grid;gap:10px}
.tpl-btn{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;cursor:pointer;transition:.16s}
.tpl-btn:hover{border-color:var(--slate-3)}
.tpl-btn.on{border-color:var(--ink);box-shadow:var(--sh-1)}
.tpl-btn .tn{font-weight:600;font-size:1rem;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.tpl-btn .sw{width:13px;height:13px;border-radius:4px;flex:none}
.tpl-btn p{font-size:.87rem}
.tpl-stage{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:#fff}

/* gauges + stats */
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:760px){.gauges{grid-template-columns:repeat(2,1fr)}}
.gauge{text-align:center}
.gauge .ring{width:104px;height:104px;margin:0 auto 12px;position:relative}
.gauge svg{transform:rotate(-90deg);width:104px;height:104px}
.gauge circle{fill:none;stroke-width:8;stroke-linecap:round}
.gauge .bgc{stroke:rgba(255,255,255,.1)}
.gauge .fgc{stroke:#3ECF8E;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.3,1)}
.gauge .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#fff}
.gauge .lb{font-size:.84rem;color:#A1A3A9}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:44px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;padding:26px 22px;text-align:center}
.stat .n{font-size:2rem;font-weight:700;letter-spacing:-.035em}
.stat .n span{color:inherit}
.stat .l{font-size:.86rem;color:var(--slate-2);margin-top:4px}
.dark .stat{background:#16181D}
.dark .stat .n{color:#fff}

/* pricing - tek paket */
.single{display:grid;grid-template-columns:.85fr 1.15fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);max-width:940px;margin:0 auto}
@media(max-width:820px){.single{grid-template-columns:1fr}}
.single-left{padding:38px;border-right:1px solid var(--line-2)}
@media(max-width:820px){.single-left{border-right:0;border-bottom:1px solid var(--line-2)}}
.badge-one{display:inline-block;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;padding:5px 12px;border-radius:999px;margin-bottom:18px}
.price-big{display:flex;align-items:baseline;gap:7px}
.price-big .amt{font-size:3rem;font-weight:700;letter-spacing:-.045em;line-height:1}
.price-big .per{font-size:1rem;color:var(--slate-2);font-weight:500}
.guarantee{display:flex;gap:12px;align-items:flex-start;background:var(--ok-soft);border-radius:10px;
  padding:14px 16px;font-size:.87rem;color:var(--ink-3);line-height:1.5}
.guarantee svg{width:22px;height:22px;flex:none;color:var(--ok);margin-top:1px}
.guarantee strong{color:var(--ok)}
.discount{margin-top:14px;font-size:.85rem;color:var(--slate);border:1px dashed var(--line);border-radius:10px;padding:13px 16px}
.discount strong{color:var(--ink);font-size:.95rem}
.single-right{padding:38px;background:var(--soft-2)}
.feat-title{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:18px}
.feats{list-style:none;display:grid;gap:10px;font-size:.89rem}
.feats li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-3)}
.feats li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--ok-soft);flex:none;margin-top:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5L11.8 5.6' fill='none' stroke='%2312805C' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:16px}
.feats.two-col{grid-template-columns:1fr 1fr;gap:11px 20px}
@media(max-width:520px){.feats.two-col{grid-template-columns:1fr}}
.addons{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.addons-t{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:14px}
.addon{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:.88rem;padding:8px 0;color:var(--ink-3)}
.addon b{color:var(--ink);font-weight:600;white-space:nowrap}

/* faq */
.faq{max-width:820px;margin:0 auto}
details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff;transition:.16s}
details[open]{border-color:var(--slate-3);box-shadow:var(--sh-1)}
summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;display:flex;gap:16px;align-items:center;padding:18px 22px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:11px;height:11px;flex:none;transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 22px 20px;font-size:.94rem}

/* footer */
footer{border-top:1px solid var(--line-2);padding:60px 0 40px;background:var(--soft-2)}
.f-grid{display:grid;grid-template-columns:1.5fr 1.9fr 1fr 1fr;gap:36px;margin-bottom:44px}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;gap:30px}}
.f-grid h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--slate-2);margin-bottom:15px;font-weight:600}
.f-grid ul{list-style:none;display:grid;gap:10px}
.f-grid a{font-size:.91rem;color:var(--slate)}
.f-grid a:hover{color:var(--ink)}
/* Sektör sütunu on sekiz bağlantıya çıktı; tek kolonda altbilginin
   boyunu ikiye katlıyordu. Dar ekranda tam satıra yayılıp iki kolon
   olarak kalıyor - orada da tek kolon olsa aynı sorun geri gelirdi. */
.f-sektor ul{grid-template-columns:1fr 1fr;gap:10px 20px}
@media(max-width:520px){.f-sektor ul{grid-template-columns:1fr}}
.f-about p{font-size:.9rem;margin-top:13px;max-width:36ch}
.f-bot{border-top:1px solid var(--line);padding-top:24px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--slate-2)}
.f-bot .sp{margin-left:auto}

/* legal / prose pages */
.page-head{padding:56px 0 34px;border-bottom:1px solid var(--line-2);background:var(--soft-2)}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.page-head p{margin-top:12px}
.doc{padding:52px 0 84px}
.doc h2{font-size:1.25rem;margin:34px 0 12px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.02rem;margin:22px 0 8px}
.doc p,.doc li{font-size:.95rem;color:var(--ink-3);line-height:1.75}
.doc p{margin-bottom:12px}
.doc ul,.doc ol{margin:0 0 14px 20px;display:grid;gap:6px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:.92rem}
.doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--soft-2);font-weight:600;width:34%}
.doc .updated{font-size:.85rem;color:var(--slate-2);margin-bottom:26px}
.fill{background:#FFF4D6;border-bottom:1px dashed #C9A227;padding:0 3px;border-radius:3px;font-weight:600}
.notice{background:var(--soft-2);border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:20px 0;font-size:.92rem}


/* =========================================================
   v2 - duyuru şeridi, merkezi hero, paket kartları, teklif formu
   ========================================================= */

/* merkezi hero */
.pills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:8px 15px;font-size:.85rem;font-weight:500;color:var(--ink)}
/* ⚠ İkon kutusu `flex:none` ve yazı satırı ikonla aynı yükseklikte.
   Önceden ikon, metnin satır kutusuna (line-height 1.6) göre
   ortalanıyordu; o kutunun altında iniş boşluğu olduğu için tik
   gözle bakınca yarım piksel aşağıda duruyor ve rozetten rozete
   kayıyordu. Şimdi ikon da yazı da sabit 18px'lik ortak bir satıra
   oturuyor - dört rozette de aynı yerde. */
.pill svg{width:13px;height:13px;flex:none;stroke:var(--ok);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.pill{line-height:18px;padding:10px 15px}

/* paket kartları - tek fiyat + teklife göre özel tasarım */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border-radius:var(--r-xl);padding:36px;display:flex;flex-direction:column}
.plan .ptag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:20px;align-self:flex-start}
.plan h3{font-size:1.35rem;margin-bottom:8px}
.plan .pdesc{font-size:.93rem;margin-bottom:22px}
.plan .pfoot{margin-top:auto;padding-top:24px}
.plan .btn{width:100%}
/* açık kart - ana ürün */
.plan.std{background:#fff;border:1px solid var(--ink);box-shadow:var(--sh-2)}
.plan.std .ptag{background:var(--ink);color:#fff}
/* koyu kart - özel tasarım, teklife göre */
.plan.pro{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.plan.pro .ptag{background:rgba(255,255,255,.12);color:#fff}
.plan.pro h3{color:#fff}
.plan.pro .pdesc,.plan.pro .pnote{color:#A1A3A9}
.plan.pro .feats li{color:#D6D7DA}
.plan.pro .feats li::before{background-color:rgba(255,255,255,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5L11.8 5.6' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan.pro .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.plan.pro .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.plan .pquote{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.plan .pnote{font-size:.84rem;margin-top:8px}

/* teklif / geri arama */
.quote{display:grid;grid-template-columns:.82fr 1.18fr;gap:38px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:38px;box-shadow:var(--sh-2)}
@media(max-width:920px){.quote{grid-template-columns:1fr;gap:30px;padding:28px}}
.qside h3{font-size:1.15rem;margin-bottom:10px}
.qside p{font-size:.92rem}
.big-tel{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:10px;
  margin:22px 0 2px;color:var(--ink)}
.big-tel svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qmeta{display:grid;gap:11px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2);font-size:.9rem}
.qmeta a,.qmeta span{display:flex;align-items:center;gap:10px;color:var(--slate)}
.qmeta a:hover{color:var(--ink)}
.qmeta svg{width:15px;height:15px;stroke:var(--slate-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.qform{grid-template-columns:1fr}}
.qf{display:grid;gap:6px}
.qf.full{grid-column:1/-1}
@media(max-width:560px){.qf.full{grid-column:auto}}
.qf label{font-size:.82rem;font-weight:600;color:var(--slate)}
.qf input,.qf select,.qf textarea{width:100%;font:inherit;font-size:.93rem;padding:11px 13px;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;background:#fff;transition:.14s}
.qf textarea{resize:vertical;min-height:84px}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,11,12,.08)}
.qf .err{font-size:.78rem;color:var(--danger);display:none}
.qf.bad input,.qf.bad select,.qf.bad textarea{border-color:var(--danger)}
.qf.bad .err{display:block}
.qconsent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--slate);line-height:1.5}
.qconsent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--ink)}
.qok{grid-column:1/-1;display:none;gap:11px;align-items:flex-start;background:var(--ok-soft);border-radius:10px;
  padding:14px 16px;font-size:.89rem;color:var(--ink-3);line-height:1.5}
.qok.on{display:flex}
.qok svg{width:19px;height:19px;flex:none;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
/* Hata kutusu - sunucudan ?form=hata ile basılıyor */
.qok.qbad{background:#FBEAE9}
.qok.qbad svg{stroke:var(--danger)}
/* Bal küpü: display:none değil, konumla gizli (botlar gizli alanı atlıyor) */
.qhp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =========================================================
   v3 - bölüm tasarımları, ek hizmetler, koyu footer
   Site tek renk: siyah / beyaz / gri. Vurgu rengi kullanılmaz.
   ========================================================= */

/* ritim ve başlıklar */
section{padding:104px 0}
@media(max-width:700px){section{padding:64px 0}}
h2{font-size:clamp(1.75rem,3.8vw,2.7rem)}
.sec-head{margin-bottom:56px}
.sec-head h2{margin:16px 0 16px}
.eyebrow{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;
  font-size:.72rem;letter-spacing:.11em;color:var(--slate)}
.soft-bg .eyebrow{background:#fff}
.dark .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#C7C9CE}

/* sektör kartları - oklu üst köşe, belirgin hover */
.sector{position:relative;padding:32px}
.sector::after{content:"";position:absolute;top:26px;right:26px;width:15px;height:15px;opacity:.28;transition:.2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%230B0B0C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sector:hover::after{opacity:1;transform:translate(2px,-2px)}
.sector .st{color:var(--slate-2)}
.sector h3{font-size:1.28rem;padding-right:26px}
.sector ul{border-top:1px solid var(--line-2);padding-top:16px}

/* problem kartları - numaralı */
.dark .card{padding:30px}
.card .num{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.12em;
  color:var(--slate-2);margin-bottom:14px}
.dark .card .num{color:#7E828A}

/* adımlar - iri numara */
.step{padding-top:0;border-top:0;position:relative;padding-left:0}
.step .n{font-size:2.6rem;font-weight:700;letter-spacing:-.045em;color:var(--ink);
  font-family:var(--font);margin-bottom:14px;line-height:1;opacity:.14}
.step h3{font-size:1.16rem;margin-bottom:9px;padding-top:14px;border-top:2px solid var(--ink)}

/* özellik kartları - kutu yerine sakin döşeme */
.card{padding:28px}
.card:hover{border-color:var(--ink);box-shadow:var(--sh-1)}

/* tema listesi */
.tpl-btn{padding:20px 22px}
.tpl-btn.on{border-color:var(--ink);box-shadow:var(--sh-1);background:var(--soft-2)}
.tpl-btn .tn{font-size:1.02rem}

/* ---------- ek hizmetler ---------- */
.svc2{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.svc2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc2{grid-template-columns:1fr}}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;transition:.18s}
.svc-card:hover{border-color:var(--ink);background:var(--soft-2)}
.svc-card .sico{width:38px;height:38px;border-radius:10px;background:var(--soft);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.svc-card .sico svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-card h3{font-size:1.05rem;margin-bottom:7px}
.svc-card p{font-size:.89rem;margin-bottom:18px}
.svc-card .pr{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.svc-card .pr b{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.svc-card .pr span{font-size:.8rem;color:var(--slate-2)}
.svc-card .pr .ask{font-size:.95rem;font-weight:600}
.svc-band{margin-top:22px;background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:26px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.svc-band .t{font-size:1.08rem;font-weight:600}
.svc-band .d{font-size:.9rem;color:#A1A3A9;margin-top:4px;max-width:60ch}
.svc-band .btn{margin-left:auto}
@media(max-width:760px){.svc-band .btn{margin-left:0;width:100%}}

/* ---------- footer - koyu, CTA bantlı ---------- */
footer{background:var(--ink);color:#fff;border-top:0;padding:0;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:-40% 25% auto 25%;height:90%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent 70%)}
footer .wrap{position:relative;z-index:1}
.f-cta{padding:76px 0 66px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
.f-cta h2{color:#fff;margin:20px 0 14px;font-size:clamp(1.8rem,4vw,2.9rem)}
.f-cta p{color:#A1A3A9;max-width:52ch;margin:0 auto 30px;font-size:1.04rem}
.f-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.f-cta .btn-primary{background:#fff;color:var(--ink);box-shadow:none}
.f-cta .btn-primary:hover{background:#E4E4E7}
.f-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.26)}
.f-cta .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.f-tel{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:1.5rem;font-weight:700;
  letter-spacing:-.03em;color:#fff}
.f-tel svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.f-tel-note{font-size:.84rem;color:#7E828A;margin-top:6px}

.f-grid{padding:62px 0 46px;margin-bottom:0;gap:40px}
.f-grid h4{color:#7E828A}
.f-grid a{color:#C7C9CE}
.f-grid a:hover{color:#fff}
.f-about p{color:#A1A3A9}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding:24px 0 34px;margin-top:0;color:#7E828A}
.f-bot a{color:#C7C9CE}
.f-bot a:hover{color:#fff}

/* =========================================================
   v4 - üst çerçeve, tipografik ayar, bölüm rafinesi
   ========================================================= */

/* --- temel işçilik --- */
[id]{scroll-margin-top:104px}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.topbar :focus-visible,footer :focus-visible{outline-color:#fff}
h1,h2,h3,h4,.amt,.pquote,.big-tel,.f-tel,.stat .n,.step .n,.svc-card .pr b{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"kern" 1}
.lead{color:var(--slate);line-height:1.62}
.sec-head .lead{font-size:1.06rem}

/* --- duyuru şeridi --- */
.topbar{background:var(--ink);color:#fff;font-size:.83rem;position:relative;z-index:70}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:44px}
.topbar .msg{color:#B9BBC0;display:flex;align-items:center;gap:9px;margin:0;font-size:.83rem}
.topbar .msg b{color:#fff;font-weight:600}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#fff;flex:none;position:relative}
.topbar .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  animation:pl 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){.topbar .dot::after{animation:none}}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.tb-tel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;
  font-variant-numeric:tabular-nums;transition:.14s}
.tb-tel svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tb-tel:hover{opacity:.75}
.tb-sep{width:1px;height:14px;background:rgba(255,255,255,.22)}
.tb-link{color:#B9BBC0;font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);transition:.14s}
.tb-link:hover{color:#fff;text-decoration-color:#fff}
@media(max-width:880px){.topbar .msg{display:none}.topbar .right{margin:0 auto}}

/* --- üst menü --- */
header{background:rgba(255,255,255,.9)}
nav{height:74px;gap:32px}
.logo img{height:26px;width:auto}
.nav-links{gap:26px;margin-left:6px}
.nav-links > a{font-size:.91rem;font-weight:500;color:var(--slate-2)}
.nav-links > a:hover,.nav-links > a.on{color:var(--ink)}
.nav-cta{gap:8px}
.nav-cta .login{padding:9px 14px;border-radius:8px;color:var(--slate);font-weight:600}
.nav-cta .login:hover{background:var(--soft);color:var(--ink)}
.nav-cta .btn{padding:10px 18px}
.mnav{padding:10px 0 24px}
.mnav a{font-weight:500;color:var(--slate);padding:13px 2px}
.mnav a:hover{color:var(--ink)}

/* --- bölüm başlıkları --- */
.sec-head.center{max-width:60ch}
.sec-head h2{margin:18px 0 16px}

/* --- özellikler: kutu yığını yerine hatlı matris --- */
.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:1000px){.matrix{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.matrix{grid-template-columns:1fr}}
.matrix .card{border:0;border-radius:0;background:#fff;padding:30px 26px;transition:background .16s;text-align:center}
.matrix .card:hover{background:var(--soft-2);transform:none;box-shadow:none;border:0}
.matrix .ico{background:transparent;border:0;width:auto;height:auto;margin-bottom:18px}
.matrix .ico svg{width:22px;height:22px;stroke-width:1.6}
.matrix .card h3{font-size:1rem;margin-bottom:8px}
.matrix .card p{font-size:.88rem;line-height:1.62}

/* --- kart ve gölge disiplini --- */
.card{box-shadow:none}
.card:hover{border-color:var(--ink);background:var(--soft-2)}
.sector{box-shadow:none}
.sector:hover{border-color:var(--ink);box-shadow:var(--sh-1)}
.svc-card:hover{border-color:var(--ink)}

/* --- koyu bölümler --- */
.dark{background:var(--ink)}
.dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%)}
.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
.dark .card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}

/* --- editör denemesi --- */
.demo-panel,.demo-prev{box-shadow:none}
.demo-panel .hd{background:#fff;border-bottom:1px solid var(--line);font-size:.83rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--slate)}
.sitem{border-radius:8px}
.demo-hint{background:#fff;color:var(--slate-2)}

/* --- temalar --- */
.tpl-btn{box-shadow:none}
.tpl-btn.on{box-shadow:none}
.tpl-stage{box-shadow:var(--sh-1)}

/* --- fiyat --- */
.plan{padding:38px 34px}
.plan.std{box-shadow:none;border-width:1.5px}
.price-big .amt{font-size:3.2rem}
.single{box-shadow:none}
.badge-one{background:transparent;color:var(--slate);border:1px solid var(--line);letter-spacing:.12em}
.feats li{line-height:1.55}
.guarantee{background:#fff;border:1px solid var(--line)}
.discount{border-style:solid;border-color:var(--line);background:var(--soft-2)}

/* --- teklif --- */
.quote{box-shadow:none}
.qf label{color:var(--slate-2);font-size:.79rem;letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.qf input::placeholder,.qf textarea::placeholder{color:var(--slate-3)}

/* --- sss --- */
.faq{max-width:840px}
details{border-radius:10px;margin-bottom:8px;box-shadow:none}
details[open]{border-color:var(--ink);box-shadow:none}
summary{padding:19px 22px;font-size:.98rem;font-weight:600}
details p{font-size:.93rem;line-height:1.7;max-width:74ch}

/* --- footer --- */
.f-cta{padding:84px 0 72px}
.f-cta .logo img{height:30px}
.f-grid h4{font-size:.72rem;letter-spacing:.12em}
.f-grid a{font-size:.9rem;transition:.14s}
.f-bot{font-size:.83rem}

/* --- iç sayfa başlığı --- */
.page-head{padding:70px 0 46px;background:var(--soft-2);border-bottom:1px solid var(--line)}
.page-head .eyebrow{margin-bottom:18px}
.page-head h1{font-size:clamp(2rem,4.4vw,3.1rem);max-width:20ch}
.page-head p{margin-top:16px;font-size:1.06rem;max-width:62ch;line-height:1.62}
.page-head .wrap{position:relative}

/* --- yasal / uzun metin sayfaları --- */
.doc h2{font-size:1.3rem;margin:40px 0 14px;padding-top:26px;border-top:1px solid var(--line-2)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc p,.doc li{color:var(--ink-3);line-height:1.78}
.doc .updated{padding:10px 14px;background:var(--soft);border:1px solid var(--line-2);
  border-radius:8px;display:inline-block;margin-bottom:30px;color:var(--slate)}

/* --- iletişim kutuları --- */

.hero-photo{position:relative;margin:0;max-width:none}
.hero-photo picture{display:block}
.hero-photo img{display:block;width:100%;height:auto;border-radius:var(--r-xl)}

.photo-tag{position:absolute;left:4%;bottom:16%;display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);border-radius:999px;
  padding:9px 16px 9px 14px;font-size:.84rem;font-weight:600;color:var(--ink);white-space:nowrap;
  animation:float 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.photo-tag{animation:none}}
@media(max-width:760px){.photo-tag{display:none}}



/* --- B düzeni: yazılar solda, fotoğraf sağda --- */
.hero.split{padding:64px 0 76px;text-align:left;background:#fff}
.hero.split::after{display:none}
.hero.split::before{inset:-30% 45% auto -12%;height:80%}
.hero.split .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero.split h1{font-size:clamp(2.1rem,3.9vw,3.05rem);margin:18px 0 18px;letter-spacing:-.036em}
.hero.split .lead{margin:0;font-size:1.09rem;max-width:46ch}
.hero.split .hero-cta{justify-content:flex-start;margin-top:26px}
.hero.split .pills{justify-content:flex-start;margin-top:22px}
.hero.split .hero-mid{max-width:none;margin:0}
.hero.split .photo-tag{left:auto;right:-14px;bottom:26px}
@media(max-width:940px){
  .hero.split{padding:26px 0 60px}
  .hero.split .wrap{grid-template-columns:1fr;gap:30px}
  .hero.split .hero-photo{order:-1}
  .hero.split .photo-tag{right:12px}
}

/* --- mobil sabit alt CTA çubuğu --- */
.mbar{display:none}
@media(max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);
    backdrop-filter:saturate(1.8) blur(14px);border-top:1px solid var(--line);
    transform:translateY(120%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
  .mbar.on{transform:none}
  .mbar .btn{width:100%;padding:13px 14px;font-size:.92rem}
  .mbar .btn svg{width:15px;height:15px}
  body{padding-bottom:0}
  footer{padding-bottom:74px}
}
@media(prefers-reduced-motion:reduce){.mbar{transition:none}}

/* üç sütunlu matris - sektör sayfaları */
.matrix.m3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.matrix.m3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.matrix.m3{grid-template-columns:1fr}}

/* =========================================================
   v6 - tek satır başlıklar, açılır menü, footer iletişim
   ========================================================= */

/* başlıklar artık dar kolona sıkışmıyor; sadece alt metin dar kalıyor */
.sec-head,.sec-head.center{max-width:none}
.sec-head h2{max-width:none;text-wrap:balance}
.sec-head .lead{max-width:62ch}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.f-cta h2,.page-head h1{text-wrap:balance}

/* --- açılır menü --- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-size:.91rem;font-weight:500;color:var(--slate-2);padding:6px 0;transition:.14s;position:relative}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"],.nav-item.on .nav-trigger{color:var(--ink)}
.nav-trigger svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;opacity:.7}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-trigger:hover::after,.nav-item.on .nav-trigger::after{transform:scaleX(1)}

.dd{position:absolute;top:100%;left:-18px;min-width:314px;padding-top:14px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s cubic-bezier(.2,.7,.3,1)}
.nav-item:hover .dd,.dd.on{opacity:1;visibility:visible;transform:none}
.dd-in{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);
  padding:8px;display:grid;gap:2px}
.dd:not(.mega) a{display:block;padding:11px 14px;border-radius:8px;transition:background .14s}
.dd:not(.mega) a:hover{background:var(--soft)}
.dd:not(.mega) a b{display:block;font-size:.91rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.dd:not(.mega) a span{display:block;font-size:.81rem;color:var(--slate-2);line-height:1.45}
.dd .dd-foot{margin-top:6px;padding:12px 14px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--slate-2)}
.dd .dd-foot b{color:var(--ink);font-weight:600}
@media(prefers-reduced-motion:reduce){.dd{transition:none}}

/* mobil menü - gruplu */
.mnav .mgroup{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate-3);padding:18px 2px 6px;border:0}
.mnav .mgroup:first-child{padding-top:8px}
.mnav .mtel{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);border-bottom:0;padding-top:16px}
.mnav .mtel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}


/* --- footer: kompakt --- */
.f-cta{padding:58px 0 52px}
.f-cta h2{margin:0 0 12px}
.f-cta p{margin:0 auto 24px;font-size:1rem;max-width:50ch}
.f-tel{margin-top:22px;font-size:1.32rem}
.f-tel-note{font-size:.8rem;margin-top:4px}
.f-grid{padding:44px 0 34px;gap:32px;grid-template-columns:1.4fr 1.9fr 1fr 1fr}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;gap:28px}.f-about{grid-column:1/-1}}
.f-about .logo img{height:26px}
.f-grid h4{margin-bottom:13px}
.f-grid ul{gap:8px}
.f-contact{display:grid;gap:10px;margin-top:18px;list-style:none}
.f-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:#A1A3A9;line-height:1.5}
.f-contact svg{width:14px;height:14px;flex:none;margin-top:4px;stroke:#6E7278;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.f-contact a{color:#C7C9CE}
.f-contact a:hover{color:#fff}
.f-contact .maps{font-size:.82rem;color:#7E828A;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.2)}
.f-contact .maps:hover{color:#fff;text-decoration-color:#fff}
.f-bot{padding:18px 0 26px;display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap}
.f-bot .sp{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:700px){.f-bot .sp{margin-left:0}}

/* --- içeriğe atla --- */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:.9rem;font-weight:600;transition:top .16s}
.skip:focus{top:16px}

/* --- baskı: sözleşme ve yasal metinler kâğıda dökülebilsin --- */
@media print{
  .topbar,header,.mnav,.mbar,footer .f-cta,.f-grid,.f-bot,.hero-photo,.photo-tag,.rv{display:none !important}
  .rv{opacity:1 !important;transform:none !important}
  *{background:#fff !important;color:#000 !important;box-shadow:none !important}
  a{text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#444}
  .doc h2{page-break-after:avoid;border-top:1px solid #ccc}
  .doc p,.doc li,.doc table{page-break-inside:avoid}
  section,.doc{padding:0 !important}
  .page-head{padding:0 0 16px;border-bottom:1px solid #000}
  @page{margin:18mm}
}

/* --- meslek etiketleri (anasayfa sektör bölümü) --- */
.meslekler{margin-top:28px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.meslekler .mk{font-size:.84rem;color:var(--slate-2);margin-right:4px}
.meslekler a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:8px 15px;font-size:.87rem;font-weight:600;color:var(--ink);transition:.14s}
.meslekler a:hover{border-color:var(--ink);background:var(--soft-2)}
.meslekler a svg{width:11px;height:11px;stroke:var(--slate-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.meslekler a:hover svg{stroke:var(--ink)}

/* --- fotoğraf yeri (henüz görsel yok) --- */
.photo-slot{position:relative;aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:var(--r-xl);
  background:var(--soft-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}
.photo-slot svg{width:30px;height:30px;stroke:var(--slate-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.photo-slot b{font-size:.92rem;font-weight:600;color:var(--slate)}
.photo-slot span{font-size:.83rem;color:var(--slate-2);max-width:34ch;line-height:1.5}
.photo-slot code{font-size:.76rem;background:#fff;border-color:var(--line);color:var(--slate-2);margin-top:2px}

/* --- hero alt başlığı (h1 anahtar kelime olunca ikna cümlesi buraya) --- */
.hero-sub{font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink);margin:14px 0 12px;max-width:26ch}
.hero.split h1{margin:16px 0 0}

/* --- mega menü: tam genişlik, ikonlu --- */
.nav-item.mega-host{position:static}
.dd.mega{position:absolute;left:0;right:0;top:100%;width:auto;min-width:0;padding-top:0}
.dd.mega .dd-in{display:block;padding:0;border-radius:0;border-width:0 0 1px;box-shadow:var(--sh-2);background:#fff}
.mega-wrap{max-width:var(--max);margin:0 auto;padding:24px 24px 26px}
/* İki bölme: sol ray grupları, sağ bölme seçili grubun sayfalarını
   gösteriyor. On dört sektör düz listede altı satıra uzuyordu; ray,
   menünün boyunu en uzun grubun boyuna indiriyor. */
.mega-iki{display:grid;grid-template-columns:288px minmax(0,1fr);gap:0 30px;align-items:stretch}
@media(max-width:1080px){.mega-iki{grid-template-columns:250px minmax(0,1fr);gap:0 22px}}
.mega-ray{display:flex;flex-direction:column;gap:2px;padding-right:28px;border-right:1px solid var(--line-2)}
.ray-item{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:0;border-radius:10px;
  background:none;font:inherit;font-size:.94rem;font-weight:600;color:var(--ink);text-align:left;
  cursor:pointer;transition:background .14s}
.ray-item:hover,.ray-item.on{background:var(--soft)}
.ray-item .ri{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.ray-item .ri svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ray-item .rt{min-width:0}
.ray-ok{width:12px;height:12px;margin-left:auto;flex:none;stroke:var(--slate-3);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .14s}
.ray-item:hover .ray-ok,.ray-item.on .ray-ok{opacity:1}
.mega-panel{display:none;grid-template-columns:1fr 1fr;gap:4px 18px;align-content:start}
.mega-panel.on{display:grid}
@media(max-width:1080px){.mega-panel{grid-template-columns:1fr}}
.dd.mega a.mega-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;
  transition:background .14s;text-decoration:none}
.dd.mega a.mega-item:hover{background:var(--soft)}
.dd.mega .mi{width:38px;height:38px;border-radius:10px;background:var(--soft);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;flex:none;transition:.14s}
.dd.mega a.mega-item:hover .mi{background:#fff;border-color:var(--ink)}
.dd.mega .mi svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dd.mega .mt{display:block;min-width:0}
.dd.mega .mt b{display:block;font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.25}
.dd.mega .mt span{display:block;font-size:.81rem;color:var(--slate-2);line-height:1.45;font-weight:400}
/* Teklif şeridi - bölmelerin altında, tam genişlikte yatay bant.
   Sol rayın dibindeyken bir sütuna ait görünüyordu; oysa söylediği
   cümle menünün tamamı için geçerli. */
.dd.mega a.mega-cta{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:15px 20px;
  margin-top:18px;border-radius:10px;background:var(--ink);color:#fff;transition:background .14s;text-decoration:none}
.dd.mega a.mega-cta:hover{background:var(--ink-2)}
.dd.mega .mega-cta b{font-size:.9rem;font-weight:600;color:#fff;flex:none}
.dd.mega .mega-cta span{font-size:.82rem;color:#A1A3A9;line-height:1.45;font-weight:400}
.dd.mega .cta-ok{width:16px;height:16px;margin-left:auto;flex:none;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transform:translateX(0);transition:transform .16s}
.dd.mega a.mega-cta:hover .cta-ok{transform:translateX(3px)}
@media(max-width:1080px){.dd.mega .cta-ok{display:none}}

/* =========================================================
   v7 - iletişim sayfası
   ========================================================= */

/* birincil kanallar */
.kanallar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-28px;position:relative;z-index:2}
@media(max-width:1020px){.kanallar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kanallar{grid-template-columns:1fr}}
.kanallar.uc{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.kanallar.uc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kanallar.uc{grid-template-columns:1fr}}
.kanal{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;transition:.16s}
.kanal:hover{border-color:var(--ink);box-shadow:var(--sh-1)}
.kanal .ki{width:40px;height:40px;border-radius:10px;background:var(--soft);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.kanal .ki svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kanal .kb{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2)}
.kanal .kv{font-size:1.2rem;font-weight:700;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.kanal .kn{font-size:.84rem;color:var(--slate-2);margin-top:2px}

/* iletişim düzeni */
.ic-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
@media(max-width:960px){.ic-grid{grid-template-columns:1fr}}
.ic-kart{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:32px}
.ic-kart > h2{font-size:1.35rem;margin-bottom:8px}
.ic-kart > .lead{font-size:.95rem;margin-bottom:24px;max-width:52ch}
.ic-yan{display:grid;gap:16px}
.ic-blok{background:var(--soft-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px}
.ic-blok h3{font-size:1rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ic-blok p{font-size:.9rem;line-height:1.6}
.ic-blok .adres{font-size:.94rem;color:var(--ink-3);line-height:1.6}
.ic-saat{display:grid;gap:9px;font-size:.9rem}
.ic-saat div{display:flex;justify-content:space-between;gap:16px}
.ic-saat span{color:var(--slate-2)}
.ic-saat b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* departman e-postaları */
.dept{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){.dept{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dept{grid-template-columns:1fr}}
.dept a{background:#fff;padding:22px 24px;display:block;transition:background .14s}
.dept a:hover{background:var(--soft-2)}
.dept .dk{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);margin-bottom:6px}
.dept .dv{font-size:.94rem;font-weight:600;color:var(--ink);word-break:break-all}
.dept .dn{font-size:.82rem;color:var(--slate-2);margin-top:4px;line-height:1.5}

/* kurumsal künye */
.kunye{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:18px}
@media(max-width:860px){.kunye{grid-template-columns:repeat(2,1fr)}}
.kunye div{background:#fff;padding:18px 20px}
.kunye .kk{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);margin-bottom:5px}
.kunye .kd{font-size:.92rem;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* =========================================================
   v8 - hero: sıcak zemin, ölçülü renk
   ========================================================= */

/* Blok `.hero.split`in TAMAMI için - ana sayfa ve on sekiz sektör
   sayfası. Önce yalnızca ana sayfaya uygulanmıştı; iki hero yan yana
   konunca beyaz kalanlar eski sürüm gibi durdu, ayrım korunmaya değer
   çıkmadı.

   Gelen geri bildirim iki maddeydi: "bembeyaz olmuş" ve "renk yok".
   Karar, vurgu rengini YÜZEY DOLGUSU yapmadan çözmek oldu (dosya
   başındaki kısıt): renk bir yıkama (wash) ve iki yumuşak ışık
   olarak giriyor, dolu turuncu kutular olarak değil. Üstteki eyebrow
   noktası, h1 altındaki çizgi ve foto çerçevesi izinli tekil
   işaretler.

   ⚠ Hero'da buton YOK. `.hero-cta` bloğu on dokuz şablonun hepsinden
   kaldırıldı; dönüşüm yolu üst menüdeki tek CTA, sayfa içindeki teklif
   şeridi ve aşağıdaki fiyat bölümü. `.hero-cta` ve `.link-plain`
   kuralları dosyada duruyor - başka düzenler kullanabilir. */
.hero.split{
  background:linear-gradient(180deg,#FFFAF7 0%,#FDF5F0 44%,#FCFAF9 72%,var(--bg) 100%)}

/* soldaki sıcak ışık - başlığın arkasında kalır, metni bulandırmaz */
.hero.split::before{
  inset:-34% 38% auto -18%;height:100%;
  background:radial-gradient(closest-side,rgba(194,72,27,.16),transparent 74%)}

/* sağdaki nokta dokusu + soğuk ikinci ton: tek renkli yıkama düz
   duruyordu, ikinci ton derinlik veriyor. `.hero.split::after` genelde
   kapalı, burada geri açılıyor. */
.hero.split::after{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(194,72,27,.16) 1px,transparent 0),
    radial-gradient(ellipse 46% 52% at 88% 14%,rgba(18,128,92,.10),transparent 70%);
  background-size:26px 26px,auto;
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 76% 24%,#000 18%,transparent 76%);
  mask-image:radial-gradient(ellipse 74% 66% at 76% 24%,#000 18%,transparent 76%)}

/* eyebrow - izinli tekil işaret: nokta + vurgu rengi yazı */
.hero.split .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.9);border-color:rgba(194,72,27,.3);color:var(--accent-dark)}
.hero.split .eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* h1 içindeki "bugün" - altı çizgisiz, yalnızca daha kalın.
   Çizgi ve kalın yazı aynı kelimede iki kez vurgu oluyordu; çizgi
   kalktı, vurguyu ağırlık taşıyor. */
.hero.split h1 em::after{display:none}
.hero.split h1 em{font-weight:800}

/* ⚠ Boşluk h1'e DEĞİL, bitişiğindeki lead'e veriliyor.

   `.hero.split h1{margin:16px 0 0}` alt boşluğu sıfırlıyor ve bu
   sektör sayfaları için doğru: orada h1'in hemen altında `.hero-sub`
   var, ikisi tek blok gibi duruyor. Ana sayfada araya giren yok,
   başlık doğrudan lead'e yapışıyordu. Bitişik kardeş seçicisi ikisini
   de doğru yapıyor - h1'e alt boşluk verilseydi sektör sayfalarında
   başlık ile alt başlık kopardı. */
.hero.split h1 + .lead{margin-top:22px}

/* Rozetler ızgarada, akışta DEĞİL.

   ⚠ Dört rozet flex sarmasıyla iki satıra düşüyordu ve her satırın
   ikinci rozeti, solundaki rozetin genişliği kadar kayıyordu: üst
   satırda 189px, alt satırda 170px. Tikler sütun oluşturmadığı için
   göze hizasız geliyordu. `max-content` iki sütun, her satırın ikinci
   rozetini aynı x'ten başlatıyor; rozetler de sütun genişliğine
   yayıldığı için kenarlar bir hizada.

   ⚠ Sütun sayısı ekrana bağlı, rozet sayısına DEĞİL. Metin sütunu en
   geniş halinde 539px (viewport 1160'ta `--max` tavana vuruyor, altında
   sütun daralıyor). Ölçüldü: üç rozet 524px, yani ancak tavandayken
   yan yana duruyor. Bu yüzden üçüncü sütun `min-width:1160px` ardında;
   altında ikiye düşüyor ve sektörde 2+1, ana sayfada 2+2 kapanıyor.
   Her iki halde de tikler sütun oluşturuyor - istenen buydu.

   ⚠ Sığdırmak için rozetler biraz küçüldü (.85rem/15px → .81rem/12px).
   Daha fazla küçültmeyin; kalan pay avukat sayfasında 15px ve en uzun
   üçüncü rozet ("Yönetmeliğe uygun") orada. Yeni bir sektör sayfası
   daha uzun bir rozet yazarsa satır taşar - yazıyı kısaltın, punto
   düşürmeyin. */
.hero.split .pills{
  margin-top:30px;display:grid;grid-template-columns:repeat(2,max-content);
  gap:9px 10px;justify-content:start}
@media(min-width:1160px){
  .hero.split .pills{grid-template-columns:repeat(3,max-content)}
}
@media(max-width:520px){
  .hero.split .pills{grid-template-columns:minmax(0,1fr)}
}
.hero.split .pill{font-size:.81rem;padding:9px 12px;gap:7px;white-space:nowrap}
.hero.split .pill svg{width:12px;height:12px}

/* ⚠ `minmax(0,...)` şart. Çıplak `1.02fr` bir ızgara sütununa örtük
   `min-width:auto` veriyor: rozet şeridi sütuna sığmadığında sütun
   büyüyor ve genişliği fotoğraftan çalıyor. Ölçüldü - punto bir tık
   büyükken metin sütunu 539'dan 549'a çıkıp fotoğrafı daraltıyordu. */
.hero.split .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.hero.split .pill{
  background:rgba(255,255,255,.92);border-color:rgba(194,72,27,.18);
  box-shadow:0 1px 2px rgba(11,11,12,.04)}

/* fotoğrafın arkasındaki renkli kayma - görseli zeminden ayırıyor */
.hero.split .hero-photo::before{
  content:"";position:absolute;inset:18px -18px -18px 24px;border-radius:var(--r-xl);z-index:-1;
  background:linear-gradient(140deg,rgba(194,72,27,.22),rgba(18,128,92,.12) 62%,transparent)}
.hero.split .hero-photo img{
  box-shadow:0 2px 6px rgba(11,11,12,.06),0 26px 60px rgba(11,11,12,.14)}
.hero.split .photo-tag{border-color:rgba(194,72,27,.22)}

@media(max-width:940px){
  .hero.split::before{inset:-24% 8% auto -24%;height:70%}
  .hero.split::after{display:none}
  .hero.split .hero-photo::before{display:none}
}

/* =========================================================
   v8 - mega menü sol ray: seçim olduğu görünsün
   ========================================================= */

/* Geri bildirim: "soldakiler arasında geçiş olduğunu anlamadım."
   Eski aktif durum yalnızca `background:var(--soft)` idi - gri üstünde
   gri, hover ile aynı. İki işaret eklendi: aktif satırda turuncu şerit
   ve sağdaki bölmeye bakan bir çentik. Renk burada dolgu değil, işaret.

   ⚠ Bir zamanlar rayın üstünde "Grup seçin, liste sağda değişir" diye
   bir satır vardı; kaldırıldı. Menüde kullanım talimatı, tasarımın
   anlatamadığını metne yıkmak demek - işi aktif durumun kendisi
   yapıyor. Geri eklemeden önce önce stili güçlendirmeyi deneyin. */
.ray-item{position:relative;border:1px solid transparent;transition:background .14s,border-color .14s,box-shadow .14s}
.ray-item:hover{background:var(--soft);border-color:var(--line-2)}
.ray-item.on{background:#fff;border-color:var(--line);box-shadow:var(--sh-1)}
.ray-item.on::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
/* çentik: aktif satırı sağdaki bölmeye bağlar - ayırıcı çizginin üstünde durur */
.ray-item.on::after{content:"";position:absolute;right:-33px;top:50%;width:9px;height:9px;
  margin-top:-5px;background:#fff;border:1px solid var(--line);border-width:1px 0 0 1px;
  transform:rotate(135deg)}
.ray-item .ri svg{transition:stroke .14s}
.ray-item.on .ri svg,.ray-item.on .rt{color:var(--ink)}
.ray-item.on .ri svg{stroke:var(--accent)}
.ray-ok{transition:opacity .14s,transform .14s}
.ray-item:hover .ray-ok{opacity:.5}
.ray-item.on .ray-ok{opacity:1;stroke:var(--accent);transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.ray-item,.ray-ok{transition:none}}