/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;color:var(--ink-head)}

/* Layout */
.container{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{position:relative}
.sec-pad{padding-block:clamp(56px,8vw,96px)}
.sec-pad-sm{padding-block:clamp(40px,6vw,64px)}

/* Buttons and pills */
.btn-primary,.btn-ghost,.btn-soft,.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);white-space:nowrap;text-decoration:none;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.btn-primary{height:52px;padding:0 24px;background:var(--brand);color:#fff;font-size:17px;font-weight:600;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{height:40px;padding:0 20px;background:rgba(255,255,255,.72);border:1px solid rgba(23,32,42,.14);color:var(--grey-dark);font-size:14px;font-weight:500}
.btn-ghost:hover{background:#fff;color:var(--ink-head)}
.btn-soft{height:44px;padding:0 20px;background:rgba(228,232,237,.92);color:var(--grey-dark);font-size:15px;font-weight:500}
.btn-soft:hover{background:#E4E8ED;color:var(--ink-head)}
.pill{height:34px;padding:0 16px 0 12px;background:rgba(255,255,255,.75);border:1px solid rgba(23,32,42,.12);color:var(--nav-text);font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Focus */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(14,107,132,.55);outline-offset:3px;border-radius:6px}
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-soft:focus-visible,.pill:focus-visible{border-radius:var(--radius-pill)}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.include-missing{display:none}

/* Shared tab-carousel (hc-*) styles used by #nasil-calisir and #ulke; :is() keeps id specificity identical to the original per-section rules */
/* ---- shared tab-carousel frame (same block lives in 03-nasil-calisir.css and 04-ulke.css, scoped per section) ---- */
:is(#nasil-calisir,#ulke){background:var(--white);color:var(--ink);font-family:var(--font-body);padding:clamp(44px,34.14px + 2.629vw,72px) 0 clamp(36px,28.96px + 1.878vw,56px);overflow:hidden}
:is(#nasil-calisir,#ulke) *,:is(#nasil-calisir,#ulke) *::before,:is(#nasil-calisir,#ulke) *::after{box-sizing:border-box}
:is(#nasil-calisir,#ulke) .hc-defs{position:absolute;width:0;height:0;overflow:hidden}
:is(#nasil-calisir,#ulke) .hc-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
:is(#nasil-calisir,#ulke) .hc-title{margin:0 24px;font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em;font-size:clamp(30px,24.37px + 1.5023vw,46px);line-height:1.1;color:#17202A;text-align:center;text-wrap:balance}
:is(#nasil-calisir,#ulke) .hc-sub{margin:clamp(8px,7.3px + .1878vw,10px) 0 0;font-size:clamp(14px,13.3px + .1878vw,16px);line-height:1.4;color:#6B7280;text-align:center}
:is(#nasil-calisir,#ulke) .hc-tabs{width:100%;display:flex;flex-direction:column;align-items:center}
/* tabs */
:is(#nasil-calisir,#ulke) .hc-tablist-wrap{margin-top:clamp(20px,17.18px + .7512vw,28px);width:100%}
:is(#nasil-calisir,#ulke) .hc-tablist{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 16px}
:is(#nasil-calisir,#ulke) .hc-tab{flex:none;height:40px;padding:0 18px;border:0;border-radius:var(--radius-pill);display:flex;align-items:center;font:inherit;font-size:14px;font-weight:500;line-height:1;background:#F1F3F5;color:#374151;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s}
:is(#nasil-calisir,#ulke) .hc-tab:hover{background:#E6E9ED}
:is(#nasil-calisir,#ulke) .hc-tab[aria-selected="true"]{background:#17202A;color:#fff;font-weight:600}
:is(#nasil-calisir,#ulke) .hc-tab:focus-visible,:is(#nasil-calisir,#ulke) .hc-arrow:focus-visible,:is(#nasil-calisir,#ulke) .hc-dotbtn:focus-visible,:is(#nasil-calisir,#ulke) .hc-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* stage: arrows + panel + dots */
:is(#nasil-calisir,#ulke) .hc-stage{margin-top:clamp(14px,9.07px + 1.3146vw,28px);width:100%;max-width:1272px;padding:0 16px;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;grid-template-areas:"prev panels next" "dots dots dots";column-gap:20px;align-items:center}
:is(#nasil-calisir,#ulke) .hc-arrow{width:40px;height:40px;border:0;border-radius:50%;background:#17202A;display:flex;align-items:center;justify-content:center;flex:none;padding:0;cursor:pointer;transition:transform .18s,background .18s}
:is(#nasil-calisir,#ulke) .hc-arrow:hover{background:#2C3A47;transform:scale(1.05)}
:is(#nasil-calisir,#ulke) .hc-arrow svg{width:14px;height:14px;display:block}
:is(#nasil-calisir,#ulke) .hc-prev{grid-area:prev}
:is(#nasil-calisir,#ulke) .hc-next{grid-area:next}
:is(#nasil-calisir,#ulke) .hc-panels{grid-area:panels;min-width:0}
:is(#nasil-calisir,#ulke) .hc-dots{grid-area:dots;margin-top:22px;display:flex;gap:6px;align-items:center;justify-content:center}
:is(#nasil-calisir,#ulke) .hc-dotbtn{position:relative;height:6px;width:6px;border:0;border-radius:6px;padding:0;background:#D5DAE0;cursor:pointer;transition:width .25s,background .25s}
:is(#nasil-calisir,#ulke) .hc-dotbtn::after{content:"";position:absolute;inset:-9px -4px}
:is(#nasil-calisir,#ulke) .hc-dotbtn.is-active{width:22px;background:#17202A}
/* panel */
:is(#nasil-calisir,#ulke) .hc-panel{position:relative;width:100%;border-radius:28px;background:radial-gradient(120% 90% at 18% 0%,var(--t1) 0%,var(--t2) 55%,var(--t2) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -40px 80px -40px rgba(0,0,0,.05);padding:44px 48px;overflow:hidden;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:56px;align-items:start}
:is(#nasil-calisir,#ulke) .hc-panel[hidden]{display:none}
:is(#nasil-calisir,#ulke) .hc-panel.is-active{animation:hcFade .28s ease both}
@keyframes hcFade{from{opacity:0}to{opacity:1}}
:is(#nasil-calisir,#ulke) .hc-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 80% 100%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
:is(#nasil-calisir,#ulke) .hc-shot{position:relative}
:is(#nasil-calisir,#ulke) .hc-tile{position:absolute;left:-46px;top:-14px;width:120px;height:154px;border-radius:14px;transform:rotate(-14deg)}
/* product screen window */
:is(#nasil-calisir,#ulke) .hc-win{position:relative;z-index:2;border-radius:20px;background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,40,60,.06),0 2px 4px rgba(20,40,60,.04),0 14px 30px -10px rgba(20,40,60,.18),0 40px 70px -30px rgba(20,40,60,.25);display:flex;flex-direction:column;min-height:440px;overflow:hidden}
:is(#nasil-calisir,#ulke) .hc-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(20,40,60,.06);background:linear-gradient(180deg,#F7F9FB,#F1F4F7)}
:is(#nasil-calisir,#ulke) .hc-dot{width:9px;height:9px;border-radius:50%;flex:none}
:is(#nasil-calisir,#ulke) .hc-dot-r{background:linear-gradient(180deg,#FF8A80,#E5484D)}
:is(#nasil-calisir,#ulke) .hc-dot-y{background:linear-gradient(180deg,#FFD866,#E7A800)}
:is(#nasil-calisir,#ulke) .hc-dot-g{background:linear-gradient(180deg,#8BE39B,#2FA36B)}
:is(#nasil-calisir,#ulke) .hc-bar-label{margin-left:8px;font-size:11.5px;font-weight:600;color:#8A94A0;letter-spacing:0.01em;white-space:nowrap}
:is(#nasil-calisir,#ulke) .hc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
:is(#nasil-calisir,#ulke) .hc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
:is(#nasil-calisir,#ulke) .hc-head-l{display:flex;align-items:center;gap:10px;min-width:0}
:is(#nasil-calisir,#ulke) .hc-ico{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),var(--ico);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.14),0 3px 8px color-mix(in srgb,var(--ico) 33%,transparent);display:flex;align-items:center;justify-content:center}
:is(#nasil-calisir,#ulke) .hc-ico svg{width:15px;height:15px;display:block}
:is(#nasil-calisir,#ulke) .hc-head-t{font-size:15.5px;font-weight:700;color:#17202A;letter-spacing:-0.01em;line-height:1.3}
:is(#nasil-calisir,#ulke) .hc-prog{flex:1;height:7px;border-radius:4px;background:linear-gradient(180deg,#E9EDF1,#F4F6F8);box-shadow:inset 0 1px 2px rgba(20,40,60,.10)}
:is(#nasil-calisir,#ulke) .hc-prog-fill{height:100%;border-radius:4px;background:linear-gradient(180deg,var(--fill),var(--fill) 55%,rgba(0,0,0,.15)),var(--fill);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 2px 6px color-mix(in srgb,var(--fill) 40%,transparent)}
:is(#nasil-calisir,#ulke) .hc-prog-num{font-size:12px;font-weight:600;color:#6B7280;white-space:nowrap}
/* text column */
:is(#nasil-calisir,#ulke) .hc-text{position:relative;padding-top:12px;padding-right:200px}
:is(#nasil-calisir,#ulke) .hc-h3{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em;font-size:clamp(28px,22.37px + 1.5023vw,44px);line-height:1.08;color:var(--accent);text-wrap:balance}
:is(#nasil-calisir,#ulke) .hc-p{margin:clamp(12px,9.89px + .5634vw,18px) 0 0;font-size:clamp(15px,14.3px + .1878vw,17px);line-height:1.5;color:#3F4A56;text-wrap:pretty}
:is(#nasil-calisir,#ulke) .hc-cta{margin-top:clamp(18px,15.18px + .7512vw,26px)}
:is(#nasil-calisir,#ulke) .hc-btn{height:clamp(42px,41.3px + .1878vw,44px);padding:0 22px;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--accent) 0%,var(--accent) 60%,rgba(0,0,0,.12) 100%),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -4px color-mix(in srgb,var(--accent) 60%,transparent),0 1px 2px rgba(0,0,0,.15);display:inline-flex;align-items:center;color:#fff;font-size:clamp(14px,13.65px + .0939vw,15px);font-weight:600;letter-spacing:-0.01em;text-decoration:none;transition:transform .18s,filter .18s}
:is(#nasil-calisir,#ulke) .hc-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
:is(#nasil-calisir,#ulke) .hc-stork{position:absolute;right:-12px;bottom:-66px;width:300px;height:287px;transform:rotate(-14deg);--halo:#FFFFFF;filter:drop-shadow(0 12px 18px rgba(20,40,60,.18));pointer-events:none}
@media (prefers-reduced-motion:reduce){:is(#nasil-calisir,#ulke) .hc-panel.is-active{animation:none}:is(#nasil-calisir,#ulke) .hc-tab,:is(#nasil-calisir,#ulke) .hc-arrow,:is(#nasil-calisir,#ulke) .hc-dotbtn,:is(#nasil-calisir,#ulke) .hc-btn{transition:none}}
/* ---- mobile / narrow layout (375 reference) ---- */
@media (max-width:899px){
:is(#nasil-calisir,#ulke) .hc-tablist{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
:is(#nasil-calisir,#ulke) .hc-tablist::-webkit-scrollbar{display:none}
:is(#nasil-calisir,#ulke) .hc-tab{height:36px;padding:0 14px;font-size:13px;scroll-snap-align:start}
:is(#nasil-calisir,#ulke) .hc-stage{grid-template-columns:minmax(0,1fr) 40px auto 40px minmax(0,1fr);grid-template-areas:"panels panels panels panels panels" ". prev dots next .";column-gap:16px;row-gap:18px;align-items:center}
:is(#nasil-calisir,#ulke) .hc-panels{width:100%}
:is(#nasil-calisir,#ulke) .hc-dots{margin-top:0;min-width:58px}
:is(#nasil-calisir,#ulke) .hc-panel{border-radius:22px;padding:16px 16px 120px;display:flex;flex-direction:column;gap:18px}
:is(#nasil-calisir,#ulke) .hc-tile{left:-30px;top:-10px;width:70px;height:90px;border-radius:8px}
:is(#nasil-calisir,#ulke) .hc-win{border-radius:16px;min-height:0}
:is(#nasil-calisir,#ulke) .hc-body{padding:16px 16px 18px}
:is(#nasil-calisir,#ulke) .hc-text{padding:4px 4px 0}
:is(#nasil-calisir,#ulke) .hc-h3{line-height:1.1}
:is(#nasil-calisir,#ulke) .hc-stork{right:-8px;bottom:-42px;width:190px;height:182px}
}