/* ================= tokens ================= */
:root{
  --paper:#ffffff;
  --ink:#0B0B0C;
  --blue:#1F3BFF;
  --orange:#FF6A1A;
  --tint:#F5F4F1;
  --line:#E6E4DF;
  --mute:#6E6B66;
  --grid:rgba(31,59,255,.07);
  --display:"Archivo",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+011E,U+011F,U+0130,U+0131,U+015E,U+015F}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plex-mono-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plex-mono-600-latin.woff2) format("woff2");font-weight:600;font-display:swap}

/* ================= base ================= */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body.ko{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.ko a{color:inherit;text-decoration:none}
.ko img{display:block;max-width:100%}
.ko .wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.ko .mono{font-family:var(--mono)}
.ko section{position:relative}
.ko :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ruled grid paper texture — the page's ground */
.ko .sheet{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px}

/* ================= buttons ================= */
.ko .btn{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:16px;border-radius:999px;padding:16px 26px;transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.ko .btn .cap{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.18);transition:transform .5s var(--ease)}
.ko .btn:hover .cap{transform:translate(3px,-2px)}
.ko .btn:active{transform:scale(.97)}
.ko .btn-dm{background:var(--blue);color:#fff;box-shadow:0 14px 34px -14px rgba(31,59,255,.55)}
.ko .btn-dm:hover{background:var(--ink)}
.ko .btn-ghost{border:1.5px solid var(--line);background:#fff}
.ko .btn-ghost:hover{border-color:var(--ink)}

/* ================= header ================= */
.ko .hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ko .hd .wrap{display:flex;align-items:center;gap:28px;height:68px}
.ko .hd .logo{font-weight:800;font-size:19px;letter-spacing:-.02em}
.ko .hd .logo i{font-style:normal;color:var(--orange)}
.ko .hd nav{display:flex;gap:24px;margin-inline:auto;font-size:15px;font-weight:600;color:var(--mute)}
.ko .hd nav a:hover{color:var(--ink)}
.ko .hd .btn{padding:11px 18px;font-size:14px}
@media (max-width:760px){.ko .hd nav{display:none}}

/* ================= hero ================= */
.ko .hero{overflow:hidden;border-bottom:1px solid var(--line)}
.ko .hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,8vw,110px)}
.ko .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;margin-bottom:26px}
.ko .eyebrow b{color:var(--orange)}
.ko h1{font-size:clamp(2.4rem,1.6rem + 4vw,4.6rem);line-height:1.02;letter-spacing:-.025em;font-weight:800}
.ko h1 .l2{display:block;color:var(--mute);font-weight:700}
.ko .price{margin-top:34px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ko .price .amount{font-family:var(--mono);font-weight:600;font-size:clamp(3rem,2rem + 5.5vw,5.6rem);letter-spacing:-.04em;line-height:1;color:var(--ink);position:relative}
.ko .price .amount::after{content:"";position:absolute;left:2%;bottom:-6px;width:96%;height:10px;background:var(--orange);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .9s}
.ko.is-in .price .amount::after{transform:scaleX(1)}
.ko .price .per{font-size:16px;font-weight:700;max-width:180px;line-height:1.3}
.ko .price .per small{display:block;font-weight:500;color:var(--mute)}
.ko .hostnote{margin-top:14px;font-size:13.5px;color:var(--mute)}
.ko .status{margin-top:26px;font-family:var(--mono);font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ko .status .dot{width:9px;height:9px;border-radius:99px;background:var(--orange);animation:ko-pulse 1.6s infinite}
@keyframes ko-pulse{50%{opacity:.35}}
.ko .status b{color:var(--orange)}
.ko .hero .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.ko .pcard{position:relative;border:1px solid var(--line);border-radius:22px;background:var(--tint);padding:10px}
.ko .pcard img{border-radius:14px;width:100%;height:auto}
.ko .pcard figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 6px 4px;font-size:13.5px}
.ko .pcard figcaption b{display:block;font-size:15px}
.ko .pcard figcaption span{color:var(--mute)}
.ko .pcard .stamp{position:absolute;top:-14px;right:-10px;background:var(--orange);color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;padding:8px 14px;border-radius:999px;transform:rotate(4deg);box-shadow:0 10px 24px -10px rgba(255,106,26,.6)}
@media (max-width:860px){.ko .hero .wrap{grid-template-columns:1fr}.ko .pcard{max-width:420px}}

/* ================= marquee ================= */
.ko .ribbon{background:var(--ink);color:#fff;overflow:hidden;padding-block:13px;border-block:1px solid var(--ink)}
.ko .ribbon .track{display:flex;gap:0;white-space:nowrap;will-change:transform}
.ko .ribbon span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding-inline:26px}
.ko .ribbon b{color:var(--orange)}

/* ================= board ================= */
.ko .board{background:var(--tint);border-bottom:1px solid var(--line);padding-block:clamp(60px,8vw,104px)}
.ko .board .head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:38px}
.ko .board h2{font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem);letter-spacing:-.02em;line-height:1.05;font-weight:800}
.ko .board h2 b{color:var(--blue)}
.ko .board .until{font-family:var(--mono);font-size:13.5px;color:var(--mute);text-align:right}
.ko .board .until b{display:block;font-size:18px;color:var(--ink);margin-top:4px}
.ko .slots{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ko .slot{position:relative;aspect-ratio:1/.78;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.ko .slot .no{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--mute)}
.ko .slot .st{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.06em}
.ko .slot.bos .st{color:var(--blue)}
.ko .slot.bos::after{content:"";position:absolute;inset:auto 14px 14px auto;width:10px;height:10px;border-radius:99px;background:var(--blue);opacity:.25}
.ko .slot.dolu{background:var(--ink);border-color:var(--ink);color:#fff}
.ko .slot.dolu .no{color:rgba(255,255,255,.5)}
.ko .slot.dolu .st{color:var(--orange)}
.ko .slot .tag{font-size:12.5px;color:rgba(255,255,255,.65)}
.ko .board .cd{margin-top:34px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--mute)}
.ko .cd .cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-weight:600;font-size:18px;color:var(--ink);min-width:58px;text-align:center}
.ko .cd .cell small{display:block;font-weight:400;font-size:10px;letter-spacing:.1em;color:var(--mute);margin-top:2px}
@media (max-width:860px){.ko .slots{grid-template-columns:repeat(2,1fr)}}

/* ================= included ================= */
.ko .inc{padding-block:clamp(64px,9vw,112px);border-bottom:1px solid var(--line)}
.ko .sec-eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.ko .inc h2,.ko .who h2,.ko .pick h2,.ko .steps h2,.ko .faq h2,.ko .last h2{font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem);letter-spacing:-.02em;line-height:1.08;font-weight:800;margin-bottom:34px;max-width:18ch}
.ko .inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ko .inc-card{border:1.5px solid var(--line);border-radius:18px;padding:24px;background:#fff}
.ko .inc-card .big{font-family:var(--mono);font-weight:600;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);letter-spacing:-.03em;color:var(--blue)}
.ko .inc-card p{margin-top:8px;font-weight:700}
.ko .inc-card small{display:block;margin-top:6px;color:var(--mute);font-size:13.5px;line-height:1.5}
.ko .inc-extra{margin-top:16px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px 22px}
.ko .inc-extra i{font-style:normal;color:var(--orange)}
.ko .ready{margin-top:30px;border-radius:20px;background:var(--blue);color:#fff;padding:clamp(26px,4vw,40px);display:grid;grid-template-columns:auto 1fr;gap:20px 28px;align-items:center}
.ko .ready .mark{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:24px}
.ko .ready h3{font-size:clamp(1.3rem,1.1rem + 1.2vw,1.8rem);letter-spacing:-.01em}
.ko .ready p{grid-column:2;margin-top:-10px;color:rgba(255,255,255,.85);max-width:60ch}
.ko .ready p b{color:#fff}
@media (max-width:980px){.ko .inc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ko .inc-grid{grid-template-columns:1fr}.ko .ready{grid-template-columns:1fr}.ko .ready p{grid-column:1}}

/* ================= pick (hangisi sensin) ================= */
.ko .pick{padding-block:clamp(64px,9vw,112px);background:var(--tint);border-bottom:1px solid var(--line)}
.ko .pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ko .pick-card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:clamp(24px,3.4vw,38px)}
.ko .pick-card .k{font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;background:var(--orange);display:inline-block;border-radius:8px;padding:5px 11px;margin-bottom:16px}
.ko .pick-card:last-child .k{background:var(--blue)}
.ko .pick-card h3{font-size:clamp(1.25rem,1.05rem + 1.2vw,1.7rem);letter-spacing:-.01em;margin-bottom:10px}
.ko .pick-card p{color:var(--mute)}
.ko .pick-note{margin-top:20px;font-size:14px;color:var(--mute);max-width:72ch}
.ko .pick-note b{color:var(--ink)}
@media (max-width:760px){.ko .pick-grid{grid-template-columns:1fr}}

/* ================= steps ================= */
.ko .steps{padding-block:clamp(64px,9vw,112px);border-bottom:1px solid var(--line)}
.ko .step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid var(--line);border-radius:20px;overflow:hidden}
.ko .step{padding:26px 24px 30px;background:#fff;border-left:1.5px solid var(--line)}
.ko .step:first-child{border-left:0}
.ko .step .n{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--orange);margin-bottom:38px}
.ko .step h3{font-size:1.1rem;margin-bottom:6px}
.ko .step p{font-size:14px;color:var(--mute)}
@media (max-width:860px){.ko .step-grid{grid-template-columns:1fr 1fr}.ko .step:nth-child(3){border-left:0}.ko .step:nth-child(n+3){border-top:1.5px solid var(--line)}}
@media (max-width:560px){.ko .step-grid{grid-template-columns:1fr}.ko .step{border-left:0!important;border-top:1.5px solid var(--line)}.ko .step:first-child{border-top:0}}

/* ================= who ================= */
.ko .who{padding-block:clamp(64px,9vw,112px);background:var(--ink);color:#fff}
.ko .who .sec-eyebrow{color:var(--orange)}
.ko .who-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,64px);align-items:start}
.ko .who h2{color:#fff;margin-bottom:18px}
.ko .who p.lede{color:rgba(255,255,255,.75);max-width:52ch}
.ko .who .facts{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.ko .who .facts span{font-family:var(--mono);font-size:12.5px;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px;color:rgba(255,255,255,.85)}
.ko .who .facts span.hot{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:600}
.ko .who .fiv{margin-top:26px;display:inline-flex}
.ko .works{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ko .work{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#17161a}
.ko .work img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ko .work figcaption{display:flex;justify-content:space-between;padding:10px 14px;font-size:13px;color:rgba(255,255,255,.8)}
.ko .quotes{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ko .quote{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;background:rgba(255,255,255,.04)}
.ko .quote .stars{color:var(--orange);letter-spacing:2px;font-size:13px;margin-bottom:10px}
.ko .quote p{font-size:14px;color:rgba(255,255,255,.85)}
.ko .quote b{display:block;margin-top:12px;font-family:var(--mono);font-weight:600;font-size:12px;color:rgba(255,255,255,.55)}
@media (max-width:860px){.ko .who-grid{grid-template-columns:1fr}.ko .quotes{grid-template-columns:1fr}}

/* ================= faq ================= */
.ko .faq{padding-block:clamp(64px,9vw,112px);border-bottom:1px solid var(--line)}
.ko .faq-list{max-width:820px}
.ko .faq details{border-bottom:1px solid var(--line)}
.ko .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font-weight:700;font-size:17px}
.ko .faq summary::-webkit-details-marker{display:none}
.ko .faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--blue);transition:transform .4s var(--ease)}
.ko .faq details[open] summary::after{transform:rotate(45deg)}
.ko .faq details p{padding:0 4px 20px;color:var(--mute);max-width:65ch}
.ko .faq details p b{color:var(--ink)}

/* ================= last cta ================= */
.ko .last{padding-block:clamp(72px,10vw,128px);text-align:center}
.ko .last h2{margin-inline:auto}
.ko .last .status{justify-content:center}
.ko .last .btn{margin-top:28px}

/* ================= footer ================= */
.ko .ft{border-top:1px solid var(--line);padding:26px 0 110px;font-size:13.5px;color:var(--mute)}
.ko .ft .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ================= mobile bar ================= */
.ko .mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:var(--ink);color:#fff;border-radius:16px;padding:12px 14px 12px 20px;display:none;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 18px 44px -16px rgba(0,0,0,.45);transform:translateY(130%);transition:transform .6s var(--ease)}
.ko .mbar.on{transform:none}
.ko .mbar .t{font-family:var(--mono);font-size:13px}
.ko .mbar .t b{color:var(--orange)}
.ko .mbar .btn{padding:10px 16px;font-size:13.5px;background:var(--blue)}
@media (max-width:760px){.ko .mbar{display:flex}}

/* ================= reveal (başlangıç durumları JS ile basılır; JS yoksa her şey görünür) ================= */
@media (prefers-reduced-motion:reduce){
  .ko .ribbon .track{transform:none!important}
  .ko *{animation:none!important;transition:none!important}
}

/* who bölümündeki Fiverr butonu: koyu zemine uygun ghost (inline stil GSAP clearProps ile silindiği için CSS'te) */
.ko .who .fiv{border-color:rgba(255,255,255,.3);background:transparent;color:#fff;margin-top:26px}
.ko .who .fiv:hover{border-color:#fff}
.ko .who .fiv .cap{background:rgba(255,255,255,.12)}
/* portfolyo karoları artık link */
.ko .works .work-link{display:block;border-radius:14px;transition:transform .5s var(--ease)}
.ko .works .work-link:hover{transform:translateY(-4px)}
.ko .work figcaption span{color:var(--orange)}

/* dolu slot: teslim edilen sitenin ekran görüntüsü + link (her teslim yeni referans) */
.ko a.slot{text-decoration:none;cursor:pointer}
.ko .slot.has-shot{padding:0;border-color:var(--ink)}
.ko .slot.has-shot .no{position:absolute;top:10px;left:12px;z-index:2;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ko .slot .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.ko a.slot:hover .shot{transform:scale(1.05)}
.ko .slot .slot-foot{position:relative;z-index:2;margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ko .slot.has-shot .slot-foot{padding:26px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.ko .slot .see{font-family:var(--mono);font-size:11.5px;font-weight:600;color:#fff;opacity:.85;white-space:nowrap}
.ko .slot.has-shot .tag{color:rgba(255,255,255,.85)}