/* Self-hosted fonts (replaces Google Fonts for speed; same family names). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:75% 100%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:75% 100%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: dark proof-first hero → service menu priced like gig cards → work wall → order-log reviews → 4-step process → FAQ → closing CTA. Left-aligned, one 1160px column. */
.lp{
  --ink:#141312;        /* brand black, matches iamarif.com hero */
  --ink-2:#1e1c1a;      /* raised surface on dark */
  --paper:#f2f0eb;      /* brand off-white */
  --card:#fbfaf7;       /* surface on paper */
  --line:#dcd7cc;       /* hairline on paper */
  --line-d:#34312d;     /* hairline on dark */
  --mute:#6b665e;       /* secondary text on paper */
  --mute-d:#a8a299;     /* secondary text on dark */
  --accent:#f4432c;     /* iamarif red */
  --accent-ink:#ffffff;
  --fiverr:#1dbf73;     /* used only for the Fiverr mark/rating */
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:clamp(2.3rem,1.6rem + 3.2vw,4.4rem);
  --wrap:1160px;
  --gut:max(20px, env(safe-area-inset-left, 0px));
  color:var(--ink); background:var(--paper);
  font-family:var(--body); font-size:var(--step-0); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp img{max-width:100%;height:auto;display:block}
.lp a{color:inherit}
.lp h1,.lp h2,.lp h3{font-family:var(--display);font-stretch:88%;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.02em}
.lp p{margin:0}
.lp .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:max(20px, env(safe-area-inset-right, 0px))}
.lp :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Buttons */
.lp .btn{display:inline-flex;align-items:center;gap:.7em;font:600 var(--step-0)/1 var(--body);text-decoration:none;border-radius:999px;padding:.95em 1.4em;transition:transform .15s ease, background .15s ease}
.lp .btn-primary{background:var(--accent);color:var(--accent-ink)}
.lp .btn-primary:hover{background:#e0361f}
.lp .btn-primary svg{width:1.05em;height:1.05em}
.lp .btn-ghost{color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.lp .btn-ghost:hover{background:rgba(127,127,127,.12)}
.lp .btn:active{transform:translateY(1px)}

/* Top bar */
.lp .bar{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line-d)}
.lp .bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.lp .logo{font:800 1.25rem/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.lp .logo b{color:var(--accent)}
.lp .bar .btn{padding:.7em 1.1em;font-size:.95rem}

/* Hero */
.lp .hero{background:var(--ink);color:var(--paper);padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,112px);overflow:hidden}
.lp .hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.lp .hero h1{font-size:var(--step-3);font-weight:800}
.lp .hero .lede{color:var(--mute-d);max-width:56ch;margin-top:1.4rem;font-size:var(--step-1);line-height:1.45}
.lp .hero .lede strong{color:var(--paper);font-weight:600}
.lp .hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.lp .hero .note{margin-top:1.1rem;color:var(--mute-d);font-size:var(--step--1)}

/* Profile card: mirrors the Fiverr seller card */
.lp .pcard{background:var(--ink-2);border:1px solid var(--line-d);border-radius:20px;padding:26px;display:grid;gap:20px}
.lp .pcard .who{display:flex;gap:14px;align-items:center}
.lp .pcard .avatar{width:56px;height:56px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font:800 1.5rem/1 var(--display);color:#fff;flex:none}
.lp .pcard .name{font:700 1.15rem/1.2 var(--display)}
.lp .pcard .role{color:var(--mute-d);font-size:var(--step--1)}
.lp .rating{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lp .rating .score{font:800 3.4rem/1 var(--display);letter-spacing:-.03em}
.lp .stars{color:var(--fiverr);letter-spacing:2px;font-size:1.1rem}
.lp .rating small{color:var(--mute-d);font-size:var(--step--1);flex-basis:100%}
.lp .badges{display:flex;flex-wrap:wrap;gap:8px}
.lp .badge{font-size:.82rem;font-weight:600;padding:.4em .75em;border-radius:6px;border:1px solid var(--line-d);color:var(--paper)}
.lp .badge.pro{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lp .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;border-top:1px solid var(--line-d);padding-top:18px;margin:0}
.lp .facts div{min-width:0}
.lp .facts dt{color:var(--mute-d);font-size:.8rem}
.lp .facts dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.lp .pcard .btn{justify-content:center}

/* Section scaffolding */
.lp section.band{padding-block:clamp(64px,9vw,120px)}
.lp .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.lp .head h2{font-size:var(--step-2);font-weight:800;max-width:20ch}
.lp .head p{color:var(--mute);max-width:46ch}

/* Services */
.lp .groups{display:grid;gap:clamp(28px,4vw,44px)}
.lp .group h3{font-size:var(--step-1);font-weight:700;margin-bottom:14px;display:flex;gap:12px;align-items:baseline}
.lp .group h3 span{font:500 var(--step--1) var(--body);color:var(--mute);letter-spacing:0}
.lp .gigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lp .gig{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;min-width:0;transition:border-color .15s ease}
.lp .gig:hover{border-color:var(--ink)}
.lp .gig .t{font-weight:600;line-height:1.35}
.lp .gig .d{color:var(--mute);font-size:var(--step--1)}
.lp .gig .row{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.lp .gig .price{font:700 1.25rem/1 var(--display);font-variant-numeric:tabular-nums}
.lp .gig .price small{font:500 .78rem var(--body);color:var(--mute);margin-right:4px}
.lp .gig .go{font-size:var(--step--1);font-weight:600;color:var(--accent)}
.lp .hourly{margin-top:18px;color:var(--mute);font-size:var(--step--1)}
.lp .hourly a{font-weight:600;color:var(--ink)}

/* Work */
.lp .work{background:var(--ink);color:var(--paper)}
.lp .work .head p{color:var(--mute-d)}
.lp .shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lp .shot{margin:0;border-radius:16px;overflow:hidden;background:var(--sh,#e7e3db)}
.lp .shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lp .shot figcaption{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--ink-2);font-size:var(--step--1)}
.lp .shot figcaption b{font-weight:600}
.lp .shot figcaption span{color:var(--mute-d)}
.lp .work .more{margin-top:28px}

/* Reviews: order log */
.lp .log{border-top:2px solid var(--ink)}
.lp .entry{display:grid;grid-template-columns:180px minmax(0,1fr) 220px;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.lp .entry .c b{display:block;font-weight:600}
.lp .entry .c span{color:var(--mute);font-size:var(--step--1)}
.lp .entry q{font-size:var(--step-1);line-height:1.4;quotes:"\201C" "\201D";font-family:var(--body)}
.lp .entry .meta{display:grid;gap:4px;font-size:var(--step--1);color:var(--mute);font-variant-numeric:tabular-nums;justify-items:end;text-align:right}
.lp .entry .meta .s{color:var(--fiverr);letter-spacing:1px}
.lp .entry .meta b{color:var(--ink);font-weight:600}
.lp .split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:28px}
.lp .split div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.lp .split dt{color:var(--mute);font-size:var(--step--1)}
.lp .split dd{margin:4px 0 0;font:700 1.5rem/1 var(--display)}

/* Process */
.lp .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid var(--line)}
.lp .step{padding:24px 22px 0 0;counter-increment:s}
.lp .step::before{content:counter(s);display:block;font:800 2.6rem/1 var(--display);color:var(--accent);margin-bottom:14px}
.lp .step h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.lp .step p{color:var(--mute);font-size:var(--step--1)}

/* FAQ */
.lp .faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:860px}
.lp details{border-bottom:1px solid var(--line)}
.lp summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:var(--step-1);position:relative;font-family:var(--display);font-stretch:92%}
.lp summary::-webkit-details-marker{display:none}
.lp summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--accent);transition:transform .2s ease}
.lp details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.lp details p{padding:0 0 22px;color:var(--mute);max-width:68ch}

/* Closing CTA */
.lp .close{background:var(--accent);color:#fff}
.lp .close .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:end}
.lp .close h2{font-size:var(--step-3);font-weight:800}
.lp .close p{margin-top:1rem;font-size:var(--step-1);max-width:44ch;opacity:.92}
.lp .close .actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.lp .close .btn-primary{background:var(--ink);color:var(--paper);justify-content:center}
.lp .close .btn-primary:hover{background:#000}
.lp .close .btn-ghost{justify-content:center}

.lp footer{background:var(--ink);color:var(--mute-d);font-size:var(--step--1)}
.lp footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px}
.lp footer a{color:var(--paper)}

/* Sticky mobile CTA */
.lp .dock{display:none}

@media (max-width:980px){
  .lp .hero .wrap,.lp .close .wrap{grid-template-columns:1fr}
  .lp .gigs,.lp .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .lp .entry{grid-template-columns:minmax(0,1fr) auto;gap:10px 20px}
  .lp .entry q{grid-column:1 / -1;grid-row:2}
  .lp .entry .meta{grid-column:2;grid-row:1}
}
@media (max-width:620px){
  .lp .gigs,.lp .shots,.lp .split{grid-template-columns:1fr}
  .lp .steps{grid-template-columns:1fr}
  .lp .bar .btn .opt{display:none}
  .lp .entry .meta{justify-items:start;text-align:left;grid-column:1;grid-row:3}
  .lp .entry{grid-template-columns:1fr}
  .lp .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));background:var(--ink);border-top:1px solid var(--line-d)}
  .lp .dock .btn{flex:1;justify-content:center}
  .lp footer{padding-bottom:76px}
}

/* GSAP support */
.lp .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.lp .wi{display:inline-block;will-change:transform}
.lp-anim .lp .hero h1,.lp-anim .lp .hero .lede,.lp-anim .lp .hero .actions,.lp-anim .lp .hero .note,.lp-anim .lp .pcard{visibility:hidden}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* Portfolio tiles are links */
.lp a.shot-link{display:block;text-decoration:none;color:inherit;border-radius:16px}
.lp a.shot-link figcaption{transition:background .2s ease}
.lp a.shot-link figcaption span{display:inline-flex;align-items:center;gap:6px}
.lp a.shot-link .ext{width:14px;height:14px;flex:none;transition:transform .2s ease}
.lp a.shot-link:hover figcaption{background:var(--accent)}
.lp a.shot-link:hover figcaption span{color:#fff}
.lp a.shot-link:hover .ext{transform:translate(2px,-2px)}
.lp .hero .actions + .note{margin-top:1.75rem}

/* TR page (.lp-tr set by the blocks when the page language is tr): lead form on the red band */
.lp .form-band .wrap{align-items:start}
.lp .form-band .direct{margin-top:1.4rem;font-size:var(--step-0)}
.lp .num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;user-select:all}
.lp .lead{background:var(--paper);color:var(--ink);border-radius:18px;padding:clamp(20px,3vw,28px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp .lead .full{grid-column:1 / -1}
.lp .lead .f{display:grid;gap:6px;min-width:0}
.lp .lead label{font-size:var(--step--1);font-weight:600}
.lp .lead label span{color:var(--mute);font-weight:400}
.lp .lead input,.lp .lead select,.lp .lead textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.75em .85em;min-width:0}
.lp .lead textarea{resize:vertical;min-height:88px}
.lp .lead input:focus,.lp .lead select:focus,.lp .lead textarea:focus{outline:none;border-color:var(--ink)}
.lp .lead .btn-primary{background:#25d366;color:#0b3d1f;justify-content:center;font-size:1.05rem}
.lp .lead .btn-primary:hover{background:#1fbd5a}
.lp .lead .btn-primary svg{width:1.3em;height:1.3em}
.lp .lead .err{color:#b3261e;font-size:var(--step--1);font-weight:600;margin:0}
.lp .lead .ok{font-size:var(--step--1);color:var(--mute)}
.lp .lead .ok a{color:var(--ink);font-weight:600}
.lp .lead .kvkk{font-size:.78rem;color:var(--mute)}
.lp .close .lead .btn-primary{background:#25d366;color:#0b3d1f}
.lp-tr .gig .price{font-size:1rem;font-weight:600;color:var(--mute)}
.lp .wa-fab{position:fixed;right:calc(18px + env(safe-area-inset-right, 0px));bottom:calc(18px + env(safe-area-inset-bottom, 0px));z-index:30;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.lp .wa-fab svg{width:30px;height:30px}
@media (max-width:620px){ .lp .lead{grid-template-columns:1fr} .lp-tr footer{padding-bottom:0} }

/* ---- Service article pages (lp-article) ---- */
.lp .art-head{padding:72px 0 8px}
.lp .art-head .wrap{max-width:820px}
.lp .art-head h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 18px}
.lp .art-lede{font-size:1.08rem;line-height:1.65;color:var(--mute);margin:0;max-width:640px}
.lp .art-band{padding-top:26px}
.lp .art-prose{max-width:820px}
.lp .art-prose h2{font-size:1.45rem;letter-spacing:-.015em;margin:34px 0 12px}
.lp .art-prose p{font-size:1.02rem;line-height:1.72;color:var(--mute);margin:0 0 16px}
.lp .art-prose ul,.lp .art-prose ol{margin:0 0 16px;padding-left:20px;color:var(--mute);line-height:1.7}
.lp .art-prose li{margin-bottom:7px}
.lp .art-prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(244,67,44,.45);text-underline-offset:3px}
.lp .art-prose a:hover{color:var(--brand)}
.lp .art-prose strong{color:var(--ink)}
@media (max-width:620px){.lp .art-head{padding-top:48px}}
.lp .art-prose h2:first-child{margin-top:0}