/* =========================================================
   Tamam Türkiye — self-hosted webfonts
   woff2 pulled from Google Fonts, subsetted to latin + arabic, served from
   our own origin. Three reasons this is not a <link> to fonts.googleapis.com:
     1. it removes a third-party DNS + TLS handshake from the critical path;
     2. Google's file URLs are version-pinned (…/v15/…) and rot silently;
     3. hot-linking sends every EU visitor's IP to Google, which German and
        Dutch courts have already treated as a GDPR problem — and this page
        sells into the EU.
   Inter and Playfair Display are variable fonts: one file each covers every
   weight this page uses, which is 85 KB instead of 264 KB.
   The Arabic faces live with the ads landing page, which is the only place
   Arabic is served — see /lp/private-label/assets/.
   ========================================================= */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-var-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:'Playfair Display';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/playfair-display-var-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;
}

/* =========================================================
   Tamam Türkiye — Private Label Landing Page
   Design tokens mirror the live tamamtr.com stylesheet.
   Light mode only. No external framework.
   ========================================================= */

:root{
  /* --- inherited from tamamtr.com/css/style.css --- */
  --primary:#8B1538;
  --primary-dark:#6B0F2A;
  --primary-light:#A01D45;
  --accent:#D4AF37;
  --background:#FFFFFF;
  --foreground:#1A1A1A;
  --muted:#F5F5F5;
  --border:#E5E5E5;
  --text-secondary:#666666;

  /* --- landing-page additions --- */
  --cream:#FAF7F2;
  --ink-soft:#3A3A3A;

  /* WhatsApp's signature #25D366 gives white text only 1.98:1 — a WCAG AA
     failure on every CTA. This is the same hue taken down to 5.02:1. The
     brand green is kept for the icon fill inside the floating bubble. */
  --whatsapp:#0B8043;
  --whatsapp-dark:#096B38;

  /* --accent on white or on #1A1A1A is fine (8.28:1). On the maroon --primary
     it lands at 4.41:1, just under AA for the 12px eyebrow, so dark sections
     use this lightened tint of the same gold. */
  --accent-on-primary:#E0C158;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --shadow-lg:0 18px 48px rgba(0,0,0,.12);
  /* Matches style.css's .container max-width exactly. Our .container overrides
     the site's on this page, so a narrower value would give the shared header
     20px less room than it has everywhere else — enough to wrap the nav. */
  --maxw:1200px;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--foreground);
  background:var(--background);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-light)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container.narrow{max-width:840px}
.center{text-align:center}
.mt-32{margin-top:32px}
.sr-only,.skip-link{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;
  background:var(--primary);color:#fff;padding:10px 16px;border-radius:6px;z-index:2000;
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;border:2px solid transparent;
  font-family:var(--font-body);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff;box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-whatsapp{background:var(--whatsapp);color:#fff}
.btn-whatsapp:hover{background:var(--whatsapp-dark);color:#fff;box-shadow:var(--shadow)}
.btn-lg{padding:16px 34px;font-size:1.02rem}
.btn-sm{padding:9px 18px;font-size:.85rem}
.btn-block{width:100%}

.eyebrow{
  font-family:var(--font-body);font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--primary);
  margin:0 0 12px;
}
.section-title{font-size:clamp(1.75rem,3.6vw,2.6rem);margin-bottom:16px}
.section-lead{
  max-width:720px;margin:0 auto 40px;color:var(--text-secondary);font-size:1.06rem;
}
.section{padding:88px 0}
.section-muted{background:var(--cream)}
.section-dark{background:var(--primary);color:#fff}
.section-dark .eyebrow{color:var(--accent-on-primary)}
.section-dark .section-lead{color:rgba(255,255,255,.82)}
.fineprint{font-size:.82rem;color:var(--text-secondary)}
.section-dark .fineprint{color:rgba(255,255,255,.7)}

/* ---------- Shared header & footer compatibility ----------
   The header and footer markup is copied from tamamtr.com and styled by the
   site's own css/style.css, which is loaded first. These rules resolve the
   handful of places where the two stylesheets disagree. Everything here is a
   correction, not a restyle — do not use it to diverge from the site nav. */

/* style.css sets .section-title{font-weight:700;color:var(--foreground)} at a
   higher specificity than our h1–h4 rule, which would otherwise repaint the
   dark process section's heading near-black on maroon. */
.section-title{font-weight:600;color:inherit}

/* Our generic ul rule would add list indent and a bottom margin to the two
   lists style.css leaves unstyled. */
.nav-menu,.footer-links{margin:0;padding:0}

/* style.css fixes only the logo height. The width/height attributes we add for
   CLS become presentational width hints, which the flex row then squeezes into
   a stretched logo — width:auto hands sizing back to the aspect ratio. */
.logo img,.footer-logo{width:auto}
.logo{flex:0 0 auto}

/* Nothing else here touches the nav. The menu must render byte-identically to
   every other page on the site, so its gap, padding and font-size are left
   entirely to style.css. If a future item makes it wrap, shorten a label or
   change the spacing in style.css for the whole site — not here, or this page
   will silently drift away from the rest of the nav. */

/* ---------- Hero ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(107,15,42,.94) 0%,rgba(139,21,56,.86) 45%,rgba(139,21,56,.35) 100%);
}
.hero-inner{position:relative;z-index:1;padding:96px 24px}
.hero .eyebrow{color:var(--accent)}
.hero h1{
  font-size:clamp(2.3rem,5.4vw,4rem);color:#fff;margin-bottom:20px;max-width:15ch;
}
.hero-sub{max-width:60ch;font-size:1.13rem;color:rgba(255,255,255,.93);margin-bottom:32px}
.hero-sub strong{color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0;
}
.hero-badges li{
  font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 15px;border:1px solid rgba(255,255,255,.42);border-radius:999px;
  color:rgba(255,255,255,.95);
}

/* ---------- Stat bar ---------- */
.statbar{background:var(--foreground);color:#fff;padding:38px 0}
.statbar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-num{
  display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:700;color:var(--accent);line-height:1.1;
}
.stat-label{display:block;font-size:.85rem;color:rgba(255,255,255,.75);margin-top:6px}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-icon{font-size:1.7rem;margin-bottom:10px}
.card h3{font-size:1.12rem;margin-bottom:8px}
.card p{color:var(--text-secondary);font-size:.94rem;margin:0}
.card ul{margin:14px 0 0;padding-left:1.1em;font-size:.9rem;color:var(--text-secondary)}
.card ul li{margin-bottom:5px}

.who-for{
  margin:44px auto 0;max-width:820px;text-align:center;
  padding:22px 26px;background:var(--cream);border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);color:var(--ink-soft);font-size:.98rem;
}
.section-muted .who-for{background:#fff}

/* ---------- Category cards ---------- */
.catcard{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.catcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.catcard img{aspect-ratio:16/10;object-fit:cover;width:100%}
.catcard-body{padding:24px}
.catcount{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary);background:rgba(139,21,56,.08);
  padding:5px 11px;border-radius:999px;margin-bottom:10px;
}
.catcard h3{font-size:1.3rem;margin-bottom:8px}
.catcard p{color:var(--text-secondary);font-size:.94rem}
.catcard details{margin-top:12px;font-size:.88rem}
.catcard summary{cursor:pointer;font-weight:600;color:var(--primary)}
.catcard details ul{margin-top:10px;color:var(--text-secondary)}

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split-text .section-title{margin-top:0}

.moq-table{width:100%;border-collapse:collapse;margin:24px 0 10px;font-size:.93rem}
.moq-table th,.moq-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}
.moq-table thead th{background:var(--cream);font-family:var(--font-body);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.moq-table td:last-child{font-weight:600;color:var(--primary);white-space:nowrap}

/* ---------- Process ---------- */
.process{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.process li{display:flex;gap:18px;align-items:flex-start}
.step-num{
  flex:0 0 auto;font-family:var(--font-display);font-size:1.6rem;font-weight:700;
  color:var(--accent);width:56px;height:56px;border:2px solid rgba(212,175,55,.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.process h3{color:#fff;font-size:1.14rem;margin-bottom:4px}
.process p{color:rgba(255,255,255,.82);font-size:.94rem;margin:0}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;border:1px solid var(--border)}
.gallery img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .4s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{padding:13px 16px;font-size:.85rem;color:var(--text-secondary)}

.capgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.capgrid h3{font-size:.8rem;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:8px}
.capgrid p{font-size:.9rem;color:var(--text-secondary);margin:0}

  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#000;aspect-ratio:16/9;
}

/* ---------- Certifications ---------- */
.certgrid{
  list-style:none;padding:0;margin:0 auto;max-width:1000px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.certgrid li{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:20px 14px;text-align:center;font-size:.86rem;font-weight:600;
  letter-spacing:.03em;color:var(--ink-soft);
  transition:border-color .2s ease,transform .2s ease;
}
.certgrid li:hover{border-color:var(--accent);transform:translateY(-3px)}
.certgrid + .fineprint{margin-top:22px}

/* ---------- Brands ---------- */
.brandcard{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;
}
.brandcard img{height:100%;min-height:230px;object-fit:cover}
.brandcard > div{padding:28px}
.brandcard h3{font-size:1.5rem;margin-bottom:8px}
.brand-quote{font-style:italic;color:var(--ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tags span{
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--cream);color:var(--primary);
}
.link-arrow{font-weight:600;font-size:.92rem}
.link-arrow::after{content:" →"}


/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:12px;background:#fff;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:18px 52px 18px 22px;font-weight:600;font-size:1rem;
  list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--primary);line-height:1;transition:transform .2s ease;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--primary)}
.faq p{padding:0 22px 20px;margin:0;color:var(--text-secondary);font-size:.95rem}

/* ---------- Quote form ---------- */
.split-form{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:34px;box-shadow:var(--shadow);
}
.checklist{list-style:none;padding:0;margin:0 0 26px}
.checklist li{padding-left:28px;position:relative;margin-bottom:9px;font-size:.95rem}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--primary);font-weight:700;
}
.direct-contact{padding-top:20px;border-top:1px solid var(--border)}
.direct-contact p{margin:0 0 5px;font-size:.95rem}

.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label,.field legend{
  display:block;font-size:.83rem;font-weight:600;margin-bottom:6px;color:var(--ink-soft);
}
.field label span{color:var(--primary)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--foreground);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(139,21,56,.12);
}
.field textarea{resize:vertical}
fieldset.field{border:0;padding:0;margin:0 0 16px}
.checkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.checkgrid label{
  display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:400;
  margin:0;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.checkgrid label:hover{border-color:var(--primary);background:rgba(139,21,56,.03)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--text-secondary);margin:6px 0 18px}
.consent input{margin-top:3px;flex:0 0 auto}
/* Honeypot. Hidden without moving off-canvas — a negative offset would extend
   the scrollable area in RTL and create a horizontal scrollbar on the Arabic page. */
.hp{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;opacity:0;pointer-events:none;
}
.form-status{margin-top:12px;font-size:.9rem;font-weight:600}
.form-status.ok{color:#1a7f37}
.form-status.err{color:#b3261e}

/* ---------- Footer ----------
   The footer is the site's own markup and style.css owns its layout.
   Only the two corrections below are ours. */
.footer-bottom p{margin:0}
.footer-section h3{font-family:var(--font-body);font-size:1.1rem}

/* ---------- Floating WhatsApp + mobile CTA ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:1200;
  width:58px;height:58px;border-radius:50%;background:var(--whatsapp);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.42);transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.09);color:#fff}
.mobile-cta{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .capgrid{grid-template-columns:repeat(2,1fr)}
  .certgrid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:36px}
  .process{grid-template-columns:1fr}
  .brandcard{grid-template-columns:1fr}
  .brandcard img{min-height:200px}
  .statbar-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .section{padding:64px 0}
  .hero{min-height:auto}
  .hero-inner{padding:72px 24px}
}
@media (max-width:600px){
  .grid-4{grid-template-columns:1fr}
  .certgrid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .capgrid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .checkgrid{grid-template-columns:1fr}
  .split-form{padding:24px 20px}
  .hero-cta .btn{width:100%}
  .wa-float{bottom:84px}
  .mobile-cta{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:1100;
    padding:10px 14px;background:#fff;border-top:1px solid var(--border);
    box-shadow:0 -4px 18px rgba(0,0,0,.09);
  }
  .mobile-cta .btn{flex:1;padding:13px 10px;font-size:.9rem}
  body{padding-bottom:70px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}