@layer base {

  [hidden] { display: none !important; }

  h1, h2, h3, h4, .display, blockquote, figcaption, legend, summary { text-wrap-style: balance; }
  :is(h1, h2, h3, h4) + p, .lead, .giris, .soz { text-wrap-style: balance; }
  p, li, dd, dt, .prose { text-wrap-style: pretty; }
  .prose :is(h1, h2, h3, h4) + p { text-wrap-style: pretty; }

  table, th, td, time, output, data, .num, .tabular, [data-num] { font-variant-numeric: tabular-nums; }

  :focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--color-focus, var(--color-primary, currentColor));
    outline-offset: var(--focus-ring-offset, 2px);
  }
  :focus:not(:focus-visible) { outline: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: 150ms !important;
      scroll-behavior: auto !important;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  :target { scroll-margin-block-start: var(--header-height, 5rem); }

  .nowrap, .unit, [data-nowrap] { white-space: nowrap; }

  :is(section, article, .prose, .cq):has(> :is(h1, h2, h3, .display)),
  .grid > :has(> :is(h1, h2, h3, .display)) { container-type: inline-size; }
}

@font-face {
  font-family: "MYORI Metin";
  src: url("../fonts/myori-metin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MYORI Metin";
  src: url("../fonts/myori-metin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MYORI Metin";
  src: url("../fonts/myori-metin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MYORI Urun";
  src: url("../fonts/myori-urun-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-math-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0302-0303, U+0307-0308, U+0312, U+0326-0327, U+0394, U+03A9, U+03BC, U+03C0, U+2074, U+2202, U+2205, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-symbols-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2219, U+25CA, U+2761;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0192, U+0212-0213, U+0218-021B, U+0237, U+02C7, U+02DD, U+0304, U+0308, U+1E80-1E89, U+1E9E, U+1EF2-1EF3, U+2020;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-math-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0302-0303, U+0307-0308, U+0312, U+0326-0327, U+0394, U+03A9, U+03BC, U+03C0, U+2074, U+2202, U+2205, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-symbols-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+2219, U+25CA, U+2761;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-ext-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0192, U+0212-0213, U+0218-021B, U+0237, U+02C7, U+02DD, U+0304, U+0308, U+1E80-1E89, U+1E9E, U+1EF2-1EF3, U+2020;
}

:root {
  --grafit-950:  oklch(0.150 0.004 250);   
  --grafit-900:  oklch(0.200 0.004 250);   
  --grafit-850:  oklch(0.235 0.004 250);
  --celik:       oklch(0.880 0.004 250);   
  --celik-golge: oklch(0.700 0.004 250);

  --plaka-camgobegi: oklch(0.746 0.155 233.4);   
  --plaka-turuncu:   oklch(0.771 0.161 58);      
  --plaka-nane:      oklch(0.824 0.198 156.5);   

  --cam-mavi-koyu:    oklch(0.44 0.121 248.9);   
  --cam-kirmizi-koyu: oklch(0.46 0.188 29.2);    
  --cam-yesil-koyu:   oklch(0.42 0.124 146.9);   

  --ink-950: oklch(0.150 0.004 250);
  --ink-900: oklch(0.200 0.004 250);
  --ink-850: oklch(0.235 0.004 250);
  --ink-800: oklch(0.275 0.004 250);
  --ink-700: oklch(0.350 0.004 250);
  --ink-600: oklch(0.450 0.004 250);
  --ink-500: oklch(0.560 0.004 250);
  --ink-550: oklch(0.520 0.004 250);
  --ink-450: oklch(0.610 0.004 250);
  --ink-400: oklch(0.670 0.004 250);
  --ink-300: oklch(0.770 0.004 250);
  --ink-200: oklch(0.855 0.004 250);
  --ink-100: oklch(0.920 0.003 250);
  --ink-50:  oklch(0.965 0.002 250);

  --paper:           oklch(0.975 0 0);   
  --paper-raised:    oklch(0.995 0 0);   
  --paper-sunken:    oklch(0.945 0 0);   

  --surface:         var(--paper);
  --surface-raised:  var(--paper-raised);
  --surface-sunken:  var(--paper-sunken);
  --alan-zemin:      var(--surface-raised);
  --alan-kenar:      var(--ink-450);
  --alan-kenar-hover: var(--ink-600);
  --alan-h:          3rem;
  --sepet-en:        28rem;
  --fis-en:          24rem;

  --line:            oklch(0.235 0.004 250 / 0.14);
  --line-strong:     oklch(0.235 0.004 250 / 0.30);
  --line-w:          1px;
  --line-w-strong:   2px;

  --band-bg:          var(--grafit-900);
  --band-bg-deep:     var(--grafit-950);
  --band-ring:        color-mix(in oklab, var(--aksan) 70%, transparent);

  --text:            var(--ink-850);   
  --text-strong:     var(--ink-950);
  --text-muted:      var(--ink-600);   
  --text-faint:      var(--ink-550);   

  --text-disabled:   var(--ink-450);

  --on-band:         var(--paper);
  --on-band-muted:   color-mix(in oklab, var(--paper) 76%, transparent);

  --on-band-disabled: color-mix(in oklab, var(--paper) 62%, transparent);
  --on-aksan:        var(--ink-950);

  --aksan:           var(--celik);
  --aksan-dim:       var(--celik-golge);

  --action-bg:       var(--grafit-900);    
  --action-fg:       var(--paper);
  --action-bg-band:  var(--aksan);         
  --action-fg-band:  var(--on-aksan);

  --world:           var(--grafit-900);
  --world-red:       var(--cam-kirmizi-koyu);
  --world-blue:      var(--cam-mavi-koyu);
  --world-green:     var(--cam-yesil-koyu);
  --alpha-glow:            30%;
  --alpha-veil:             8%;
  --alpha-edge:            42%;
  --alpha-desen-gecis-red:   34%;
  --alpha-desen-gecis-green: 34%;
  --alpha-desen-gecis-blue:  34%;
  --alpha-desen-gecis-notr:  34%;
  --alpha-desen-gecis:   var(--alpha-desen-gecis-notr);
  --alpha-desen-kaynak: 34%;

  --world-glow:      color-mix(in oklab, var(--world) var(--alpha-glow), transparent);
  --world-veil:      color-mix(in oklab, var(--world) var(--alpha-veil), transparent);
  --world-edge:      color-mix(in oklab, var(--world) var(--alpha-edge), transparent);
  --world-desen-gecis:  color-mix(in oklab, var(--world) var(--alpha-desen-gecis), transparent);
  --desen-kaynak: color-mix(in oklab, var(--band-bg) var(--alpha-desen-kaynak), transparent);

  --ok:              oklch(0.52 0.13 150);
  --err:             oklch(0.52 0.19 25);

  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-body:    "MYORI Metin", "Avenir Next", Helvetica, Arial, sans-serif;
  --font-urun:    "MYORI Urun", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.75rem;      
  --text-sm:   0.9375rem;    
  --text-base: 1.1875rem;    
  --text-lg:   1.5rem;       
  --text-xl:   1.875rem;     
  --text-2xl:  2.375rem;     
  --text-3xl:  clamp(3rem,   2.2rem + 3.4cqi,  4.5rem);
  --text-4xl:  clamp(3.75rem, 2.4rem + 5.2cqi, 6.5rem);
  --text-5xl:  clamp(4.5rem,  2rem   + 9cqi,   9rem);
  --text-6xl:  clamp(5.5rem,  1rem   + 14cqi,  16rem);

  --tracking-tight: -0.02em;
  --tracking-urun: 0.01em;
  --tracking-snug: 0.06em;
  --tracking-wide:  0.14em;
  --tracking-wider: 0.28em;
  --logo-oran: 531.1 / 163.5;
  --altbilgi-logo: 3rem;

  --leading-tight: 1.04;
  --leading-snug:  1.28;
  --leading-body:  1.66;
  --leading-lede:  1.42;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 11rem;

  --container:        84rem;
  --container-narrow: 38rem;
  --kart-tavan:       27rem;
  --kart-cerceve-min: 42rem;
  --kart-cerceve-en-min: 330px;
  --gutter:           clamp(1.25rem, 4vw, 3.5rem);
  --btn-px-tavan:     10vw;
  --header-h:         4.5rem;
  --ticker-h:         3rem;
  --ticker-iki-yazi:  min(var(--text-sm), 4.1cqi);
  --hero-paper:       clamp(6.5rem, 14svh, 9.5rem);
  --hero-paper-kisa:  4rem;
  --hero-film-oran-yatay: 16 / 9;
  --hero-film-oran-dikey: 4 / 3;
  --hero-film-altyazi-h: 2.75rem;
  --hero-film-odak: 50% 30%;
  --hero-perde-orta: color-mix(in oklab, var(--band-bg) 72%, transparent);
  --hero-perde-orta-konum: 30%;
  --hero-perde-ust: 58%;
  --sillage-iz:       var(--space-16);
  --desen-adim:       clamp(4rem, 3rem + 2vw, 6rem);
  --desen-karo:       var(--desen-adim) calc(var(--desen-adim) * 1.045);
  --desen-oo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 104.5'%3E%3Cpath fill-rule='evenodd' d='M1.97 22.18A14.1 14.79 13.9 1 0 29.34 28.96A14.1 14.79 13.9 1 0 1.97 22.18ZM7.41 32.44A10.73 13.13 -39.8 1 0 23.9 18.7A10.73 13.13 -39.8 1 0 7.41 32.44Z'/%3E%3Cpath fill-rule='evenodd' d='M20.66 23.29A14.1 14.79 13.9 1 0 48.03 30.07A14.1 14.79 13.9 1 0 20.66 23.29ZM26.1 33.55A10.73 13.13 -39.8 1 0 42.59 19.81A10.73 13.13 -39.8 1 0 26.1 33.55Z'/%3E%3Cpath fill-rule='evenodd' d='M51.97 74.43A14.1 14.79 13.9 1 0 79.34 81.21A14.1 14.79 13.9 1 0 51.97 74.43ZM57.41 84.69A10.73 13.13 -39.8 1 0 73.9 70.95A10.73 13.13 -39.8 1 0 57.41 84.69Z'/%3E%3Cpath fill-rule='evenodd' d='M70.66 75.54A14.1 14.79 13.9 1 0 98.03 82.32A14.1 14.79 13.9 1 0 70.66 75.54ZM76.1 85.8A10.73 13.13 -39.8 1 0 92.59 72.06A10.73 13.13 -39.8 1 0 76.1 85.8Z'/%3E%3C/svg%3E");
  --pdp-gorsel-h:     clamp(11rem, 27svh, 16rem);
  --pdp-gorsel-oran-tavan: 1.636;
  --galeri-kucuk: 5.5rem;
  --odeme-serit:      min(1.75rem, (100cqi - 4 * var(--space-4) - var(--line-w)) / 7.1);
  --odeme-mastercard: calc(var(--odeme-serit) * 0.87);
  --odeme-visa:       calc(var(--odeme-serit) * 0.54);
  --odeme-troy:       calc(var(--odeme-serit) * 0.72);
  --odeme-paytr:      calc(var(--odeme-serit) * 0.4);
  --baslik-satir:     20.1;
  --baslik-olcek:     min(1rem, (100cqi - 2 * var(--gutter)) / var(--baslik-satir));
  --baslik-logo:      calc(var(--baslik-olcek) * 1.875);
  --baslik-yazi:      calc(var(--baslik-olcek) * 0.9375);
  --baslik-bosluk:    calc(var(--baslik-olcek) * 2);
  --baslik-aralik:    calc(var(--baslik-olcek) * 1.5);
  --baslik-dolgu:     calc(var(--baslik-olcek) * 0.5);

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   10px;
  --radius-full: 999px;

  --shadow-card:   0 1px 2px  color-mix(in oklab, var(--ink-850) 5%, transparent),
                   0 10px 30px color-mix(in oklab, var(--ink-850) 7%, transparent);
  --shadow-raised: 0 2px 6px  color-mix(in oklab, var(--ink-850) 7%, transparent),
                   0 24px 60px color-mix(in oklab, var(--ink-850) 10%, transparent);
  --shadow-serit:  0 -2px 6px  color-mix(in oklab, var(--ink-850) 7%, transparent),
                   0 -12px 32px color-mix(in oklab, var(--ink-850) 10%, transparent);
  --glow-world:    0 0 90px 10px var(--world-glow);
  --scrim:         oklch(0.150 0.004 250 / 0.72);  

  --blur-frosted: 18px;
  --lift-hover:   -4px;

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --bekle-gecikme: 1s;
  --stagger:  50ms;
  --reveal-fade-range: 3rem;
  --dur-desen-yayilim: 1400ms;
  --delay-desen-iz:    500ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);      
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  color-scheme: light;
}

:root.no-js { --baslik-satir: 22.7; }

.world-red   { --world: var(--world-red);   --band-world-bg: var(--world-red);   --alpha-desen-gecis: var(--alpha-desen-gecis-red);   }
.world-blue  { --world: var(--world-blue);  --band-world-bg: var(--world-blue);  --alpha-desen-gecis: var(--alpha-desen-gecis-blue);  }
.world-green { --world: var(--world-green); --band-world-bg: var(--world-green); --alpha-desen-gecis: var(--alpha-desen-gecis-green); }

.band:is(.world-red, .world-blue, .world-green) {
  --action-bg-band: var(--paper);
  --action-fg-band: var(--grafit-950);
}

.world-red, .world-blue, .world-green {
  --world-glow:           color-mix(in oklab, var(--world) var(--alpha-glow), transparent);
  --world-veil:           color-mix(in oklab, var(--world) var(--alpha-veil), transparent);
  --world-edge:           color-mix(in oklab, var(--world) var(--alpha-edge), transparent);
  --world-desen-gecis:    color-mix(in oklab, var(--world) var(--alpha-desen-gecis), transparent);
  --glow-world:           0 0 90px 10px var(--world-glow);
}


@media (max-width: 48rem) {
  :root {
    --header-h: 4rem;
    --ticker-h: 2.75rem;
  }
}
@media (min-width: 22.5rem) and (max-width: 37.5rem) and (orientation: portrait) {
  :root:has(.ticker--iki) { --ticker-h: 4rem; }
}
@media (max-height: 37rem) and (min-aspect-ratio: 5/4) {
  :root {
    --header-h: 3.5rem;
    --ticker-h: 2.75rem;
  }
}

@media (max-height: 30rem) and (min-aspect-ratio: 5/4) {
  :root {
    --hero-perde-orta-konum: 7rem;
    --hero-perde-ust: 11rem;
  }
}
@media (max-height: 30rem) and (min-aspect-ratio: 5/4) and (max-width: 34.5rem) {
  :root {
    --hero-perde-orta-konum: 10.5rem;
    --hero-perde-ust: 14.5rem;
  }
}