:root {
  --kagit: #FFFFFF;
  --murekkep: #14161B;
  --soluk: #6A6F66;
  --cizgi: #D9D9D9;
  --aile: #71EADF;

  --font-ui: "Planc", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-veri: "Planc", system-ui, -apple-system, "Segoe UI", sans-serif;

  --kenar: clamp(18px, 4.2vw, 68px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--kagit); color: var(--murekkep);
       font: 400 clamp(14px, 1.05vw, 16px)/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.gizli-svg { position: absolute; }
.ekran-okuyucu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--aile); outline-offset: 3px; }

.ust { display: flex; align-items: center; padding: clamp(18px, 2.4vw, 34px) var(--kenar); }
.ust-marka { display: block; line-height: 0; }
.ust-film { margin-left: auto; }

a.film-dugme { display: inline-flex; align-items: center; gap: clamp(9px, .85vw, 14px);
               padding: clamp(4px, .38vw, 5px) clamp(18px, 1.7vw, 26px) clamp(4px, .38vw, 5px) clamp(4px, .38vw, 5px);
               border: 2px solid currentColor; border-bottom: 2px solid currentColor;
               border-radius: 999px; background: none; text-decoration: none;
               font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
               font-size: clamp(11px, .9vw, 14px); line-height: 1;
               transition: background-color .2s ease, color .2s ease; }
a.film-dugme svg { width: clamp(22px, 1.75vw, 26px); height: clamp(22px, 1.75vw, 26px); flex: none; }
a.film-dugme span { transform: translateY(.12em); }
a.film-dugme:hover { background: var(--murekkep); color: var(--kagit); }

.marka-logo { width: clamp(148px, 15.5vw, 232px); aspect-ratio: 861.9 / 342.6; color: var(--murekkep); }

.giris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         gap: clamp(20px, 3.5vw, 64px); align-items: start;
         padding: clamp(8px, 1.5vw, 24px) var(--kenar) clamp(30px, 4vw, 64px); }
.giris-vurgu { font-size: clamp(21px, 2.5vw, 42px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.giris-metin { display: grid; gap: .85em; max-width: 60ch; font-size: clamp(13.5px, 1vw, 16px); line-height: 1.6; }

.sahne { position: relative; width: 100%; aspect-ratio: 2.15 / 1; background: #000; color: #fff;
         touch-action: pan-y;
         overflow: hidden; isolation: isolate; --oluk: clamp(16px, 2.4vw, 38px);
         --ust-serit: clamp(34px, 3.6vw, 54px); }

#tuval { position: absolute; left: var(--oluk); top: var(--ust-serit); width: calc(100% - var(--oluk) * 2);
         height: calc(66% - var(--ust-serit)); display: block; }

.kirinti { position: absolute; top: clamp(16px, 2.2vw, 32px); left: var(--oluk);
           display: flex; align-items: center; gap: .6em; margin: 0;
           font-family: var(--font-veri); font-weight: 500; font-size: clamp(10px, .82vw, 13px); letter-spacing: .1em;
           text-transform: uppercase; color: #fff; }
.kirinti svg { width: 1.45em; height: 1.45em; color: var(--aile); flex: none; }
.kirinti .ayirac { opacity: .5; }

.yuvarlak { display: inline-grid; place-items: center; width: clamp(34px, 3vw, 44px); aspect-ratio: 1;
            border: 1.3px solid rgba(255,255,255,.65); border-radius: 50%; background: none; color: #fff;
            font-size: clamp(13px, 1.05vw, 16px); line-height: 1; cursor: pointer;
            transition: background-color .18s, border-color .18s; }
.yuvarlak:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.sahne-orta { grid-column: 2; display: grid; justify-items: center; gap: clamp(6px, .7vw, 12px); }
.bilgi { display: inline-grid; place-items: center; border: 0; border-radius: 999px;
         padding: clamp(10px, .83vw, 13px) clamp(21px, 1.92vw, 30px);
         background: var(--aile); color: var(--aile-yazi, #14161B);
         font-family: var(--font-veri); font-weight: 700; font-size: clamp(11px, .92vw, 14px);
         letter-spacing: .12em; line-height: 1; cursor: pointer;
         box-shadow: 0 0 0 4px color-mix(in srgb, var(--aile) 20%, transparent);
         transition: transform .2s ease, box-shadow .3s ease; }
.bilgi:hover { background: var(--aile); transform: scale(1.06);
               box-shadow: 0 0 0 10px color-mix(in srgb, var(--aile) 30%, transparent); }

.k-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.k-geri { left: var(--oluk); }
.k-ileri { right: var(--oluk); }

.sahne-alt { position: absolute; left: var(--oluk); right: var(--oluk);
             bottom: clamp(14px, 2vw, 30px); display: grid; grid-template-columns: 1fr auto 1fr;
             align-items: center; gap: 16px; }

.ag-dugme { position: relative; display: grid; place-items: center; width: clamp(104px, 10vw, 150px);
            aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; color: #fff; }
.ag-motif { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; opacity: .92;
            transition: transform .35s ease, opacity .25s; }
.ag-dugme:hover .ag-motif { transform: rotate(-6deg) scale(1.04); opacity: 1; }

.ag-yuvar { position: relative; display: grid; place-items: center; width: 58%; aspect-ratio: 1;
            border-radius: 50%; border: 2px solid #fff; overflow: hidden; background: #11131a; }
.ag-yuvar::before, .ag-yuvar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.ag-yuvar::before { background: var(--ag-gradyan, conic-gradient(#71EADF, #60F96C, #FFC810, #FF5F8E, #5E53FF, #71EADF));
                    animation: agHalka 26s linear infinite; }
.ag-yuvar::after {
  background:
    radial-gradient(closest-side, var(--isik-1, #71EADF) 0%, transparent 72%),
    radial-gradient(closest-side, var(--isik-2, #60F96C) 0%, transparent 74%),
    radial-gradient(closest-side, var(--isik-3, #FF5F8E) 0%, transparent 70%),
    radial-gradient(closest-side, var(--isik-4, #5E53FF) 0%, transparent 76%);
  background-repeat: no-repeat;
  background-size: 118% 118%, 106% 106%, 124% 124%, 110% 110%;
  opacity: .82;
  animation: agAk 15s ease-in-out infinite alternate;
}
.ag-yazi { position: relative; z-index: 1; font-weight: 700; font-size: clamp(13px, 1.15vw, 18px);
           letter-spacing: .02em; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
@keyframes agHalka { to { transform: rotate(360deg); } }
@keyframes agAk {
  from { background-position: -18% -22%, 112% -14%, 16% 120%, 118% 108%; }
  to   { background-position: 104% 46%, -12% 84%, 92% -16%, -20% 24%; }
}

.paylas { grid-column: 3; justify-self: end; padding: 0; }
.paylas svg { width: 52%; height: 52%; }
.paylas[data-durum="kopyalandi"] { background: #fff; color: #000; border-color: #fff; }

.sahne[data-hal="ag"] .kirinti,
.sahne[data-hal="ag"] .paylas,
.sahne[data-hal="ag"] .k-ok,
.sahne[data-hal="ag"] .bilgi { opacity: 0; pointer-events: none; }
.sahne[data-hal="ag"] .ag-dugme { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
.sahne[data-hal="ag"] .sahne-alt { pointer-events: none; }

.sahne[data-hal="ag"] #tuval { height: calc(100% - var(--ust-serit) - var(--oluk)); }
.kirinti, .paylas, .k-ok, .bilgi, .ag-dugme { transition: opacity .35s ease, transform .35s ease; }
.ag-kapat { position: absolute; top: clamp(14px, 2vw, 28px); right: var(--oluk); font-size: 1.15em; }

.aile-serit { display: none; }
.sahne.ag-tam {
  position: fixed; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; z-index: 60; }
.sahne.ag-tam #tuval {
  left: 0; top: 0; width: 100%; height: 100%; }
body.ag-kilit { overflow: hidden; }

.sahne.ag-tam .aile-serit {
  display: flex; position: absolute; left: var(--oluk); right: var(--oluk);
  bottom: clamp(16px, 2.2vw, 34px); z-index: 3;
  flex-wrap: wrap; justify-content: center; align-content: end;
  gap: clamp(5px, .5vw, 9px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease; }
.sahne.ag-tam .aile-serit.gorunur {
  opacity: 1; visibility: visible; transform: none; }
.sahne.ag-tam .aile-serit { pointer-events: none; }
.aile-dugme { pointer-events: auto; }

.aile-dugme { display: inline-flex; align-items: center; gap: .55em;
              padding: .5em .85em; border-radius: 999px; cursor: pointer;
              border: 1.2px solid color-mix(in srgb, var(--renk) 48%, transparent);
              background: color-mix(in srgb, var(--renk) 9%, transparent); color: #fff;
              font-family: var(--font-veri); font-weight: 500;
              font-size: clamp(9.5px, .74vw, 12px); letter-spacing: .08em;
              line-height: 1; text-transform: uppercase;
              transition: background-color .18s, border-color .18s, color .18s; }
.aile-dugme::before { content: ""; width: .6em; height: .6em; border-radius: 50%;
                      background: var(--renk); flex: none; }
.aile-dugme:hover { border-color: var(--renk);
                    background: color-mix(in srgb, var(--renk) 22%, transparent); }
.aile-dugme[aria-pressed="true"] { background: var(--renk); border-color: var(--renk);
                                   color: var(--renk-yazi, #14161B); }
.aile-dugme[aria-pressed="true"]::before { background: var(--renk-yazi, #14161B); }

.film-katman { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
              padding: clamp(14px, 3vw, 48px); background: rgba(8,9,12,.95); }
.film-katman[hidden] { display: none; }
.film-kapat { position: fixed; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); z-index: 1; }
.film-kutu { width: min(100%, 1180px); }
.film-cerceve { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
                border-radius: clamp(6px, .7vw, 12px); }
.film-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.paylas-katman { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
                 padding: clamp(16px, 3vw, 32px); background: rgba(8,9,12,.93);
                 overflow-y: auto; }
.paylas-katman[hidden] { display: none; }
.paylas-kutu { position: relative; display: grid; justify-items: center;
               gap: clamp(12px, 1.6vw, 20px); width: min(400px, 100%);
               color: #fff; text-align: center; }
.paylas-kutu h2 { margin: 0; font-size: clamp(15px, 1.3vw, 19px); font-weight: 700; letter-spacing: -.01em; }
.paylas-kapat { position: fixed; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }

.paylas-onizleme { position: relative; display: grid; place-items: center;
                   height: min(420px, 44vh); width: auto; aspect-ratio: 1080 / 1920;
                   border-radius: 14px; overflow: hidden; background: #000;
                   border: 1px solid rgba(255,255,255,.14); }
.paylas-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paylas-bekle { position: absolute; font-family: var(--font-veri); font-size: 12px;
                letter-spacing: .04em; color: rgba(255,255,255,.55); }
.paylas-bekle[hidden] { display: none; }

.paylas-dugmeler { display: grid; gap: 8px; width: 100%; }
.paylas-is { padding: .95em 1.2em; border-radius: 999px; border: 0; cursor: pointer;
             background: #fff; color: #14161B; font-family: var(--font-ui); font-weight: 700;
             font-size: clamp(13px, 1vw, 15px); transition: opacity .18s; }
.paylas-is.ikincil { background: rgba(255,255,255,.1); color: #fff;
                     border: 1px solid rgba(255,255,255,.22); }
.paylas-is:disabled { opacity: .42; cursor: default; }
.paylas-is:not(:disabled):hover { opacity: .85; }
.paylas-is[hidden] { display: none; }
.paylas-not { margin: 0; min-height: 1.3em; font-family: var(--font-veri); font-size: 12px;
              line-height: 1.4; color: rgba(255,255,255,.6); }
.ag-kapat[hidden] { display: none; }

.sahne-durum { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
               font-family: var(--font-veri); font-size: 13px; color: rgba(255,255,255,.7); }
.sahne-durum:empty { display: none; }

.detay { position: fixed; inset: 0; background: var(--aile); color: var(--aile-yazi, var(--murekkep));
         display: grid;
         align-content: center; align-content: safe center;
         padding: clamp(24px, 4vw, 64px) clamp(20px, 4vw, 64px); overflow: auto; z-index: 70;
         padding-top: max(clamp(24px, 4vw, 64px), env(safe-area-inset-top, 0px));
         padding-bottom: max(clamp(24px, 4vw, 64px), env(safe-area-inset-bottom, 0px)); }
.detay[hidden] { display: none; }
.detay-kapat { position: fixed; top: max(clamp(12px, 1.4vw, 22px), env(safe-area-inset-top, 0px));
               right: clamp(12px, 1.4vw, 22px); z-index: 1;
               border-color: currentColor; color: inherit; }
.detay-kapat:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.detay-ic { max-width: 62ch; margin: 0 auto; display: grid; gap: clamp(14px, 1.6vw, 24px); }

@keyframes detayBelir { from { opacity: 0; transform: translateY(9px); } to { transform: none; } }
.detay:not([hidden]) .detay-ic > * { animation: detayBelir .5s cubic-bezier(.22, .68, .3, 1) both; }
.detay:not([hidden]) .detay-ic > *:nth-child(2) { animation-delay: .06s; }
.detay:not([hidden]) .detay-ic > *:nth-child(3) { animation-delay: .12s; }
.detay:not([hidden]) .detay-ic > *:nth-child(4) { animation-delay: .18s; }
.detay:not([hidden]) .detay-ic > *:nth-child(5) { animation-delay: .24s; }
.detay-yol { margin: 0; display: flex; align-items: center; gap: .6em;
             font-family: var(--font-veri); font-weight: 500; font-size: clamp(10px, .82vw, 13px);
             letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.detay-yol svg { width: 1.75em; height: 1.75em; flex: none; opacity: .9; }
.detay-yol .ayirac { opacity: .5; }
.detay h2 { font-size: clamp(20px, 2.2vw, 34px); line-height: 1.2; font-weight: 700; }
.detay-hikaye { display: grid; gap: .85em; font-size: clamp(13px, 1vw, 16px); line-height: 1.6; }
.detay-hikaye[hidden] { display: none; }
.detay-hikaye h3 { margin: 1.15em 0 -.1em; font-family: var(--font-veri); font-weight: 700;
                   font-size: clamp(11.5px, .95vw, 14px); letter-spacing: .13em;
                   text-transform: uppercase; opacity: 1; }
.detay-hikaye h3:first-child { margin-top: 0; }
.detay-hikaye .hikaye-imza { margin-top: .45em; padding-top: 1.1em; padding-bottom: 1.1em;
                             border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
                             border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent);
                             font-size: 1.18em; font-weight: 500; line-height: 1.42;
                             letter-spacing: -.008em; opacity: 1; text-wrap: pretty; }
.detay-liste { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.detay-liste dt { font-family: var(--font-veri); font-weight: 500; font-size: clamp(10px, .8vw, 12px);
                  letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: .25em; }
.detay-liste dd { margin: 0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; }
.detay-liste dd.kelime { font-family: var(--font-veri); display: flex; flex-wrap: wrap;
                         align-items: baseline; gap: .12em .5em;
                         font-size: clamp(14px, 1.15vw, 18px); font-weight: 500;
                         line-height: 1.45; letter-spacing: -.005em; }
.detay-liste dd.kelime i { font-style: normal; opacity: .34; }
.detay-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                 gap: clamp(14px, 1.6vw, 20px) 0; }
.detay-sayilar[hidden] { display: none; }
.detay-sayilar > div { display: grid; grid-template-columns: auto minmax(0, 1fr);
                       gap: 0 clamp(7px, .68vw, 10px); align-items: start;
                       padding-inline: clamp(7px, .8vw, 13px);
                       border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.detay-sayilar .sayi-sim { width: clamp(19px, 1.6vw, 23px); height: auto; margin-top: .15em; }
.detay-sayilar > div:first-child { padding-left: 0; border-left: 0; }
.detay-sayilar b { display: block; font-size: clamp(19px, 2vw, 29px); font-weight: 700;
                   line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.detay-sayilar b.kelime { font-size: clamp(17px, 1.7vw, 24px); letter-spacing: -.015em; }
.detay-sayilar b small { font-size: .42em; font-weight: 500; letter-spacing: 0;
                         margin-left: .2em; opacity: .72; }
.detay-sayilar em { display: block; margin-top: .45em; font-family: var(--font-veri); font-style: normal;
                    font-size: clamp(9px, .72vw, 10.5px); font-weight: 500; letter-spacing: .06em;
                    text-transform: uppercase; opacity: .66; line-height: 1.35; }
@media (max-width: 560px) {
  .detay-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detay-sayilar > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

.ust-bag { margin-left: auto; text-decoration: none; font-weight: 500;
           font-size: clamp(12px, .9vw, 15px); border-bottom: 1.5px solid currentColor; padding-bottom: .15em; }
.ust-bag:hover { opacity: .6; }
.liste-bas { display: grid; gap: .5em; padding: clamp(8px, 1.5vw, 24px) var(--kenar) clamp(26px, 3vw, 46px); }
.liste-bas h1 { font-size: clamp(24px, 3vw, 46px); font-weight: 700; letter-spacing: -.015em; }
.liste-bas p { max-width: 68ch; font-size: clamp(13px, .95vw, 15.5px); line-height: 1.55; color: var(--soluk); }
.liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
         gap: clamp(26px, 3vw, 48px); padding: 0 var(--kenar) clamp(40px, 5vw, 80px); align-items: start; }
.l-aile h2 { display: flex; align-items: center; gap: .5em; margin-bottom: .7em;
             font-size: clamp(13px, 1vw, 16px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.l-aile h2 svg { width: 1.5em; height: 1.5em; color: var(--aile); flex: none; }
.l-sayi { margin-left: auto; font-weight: 500; color: var(--soluk); letter-spacing: 0; }
.l-aile ol { display: grid; gap: .1em; }
.l-aile a { display: grid; gap: .1em; text-decoration: none; padding: .5em .7em; margin: 0 -.7em;
            border-radius: 8px; border-left: 3px solid transparent; transition: background-color .15s, border-color .15s; }
.l-aile a:hover { background: color-mix(in srgb, var(--aile) 14%, transparent); border-left-color: var(--aile); }
.l-soz { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.35; }
.l-konu { font-size: clamp(10px, .78vw, 12px); font-weight: 500; letter-spacing: .07em;
          text-transform: uppercase; color: var(--soluk); }

.surum-sec { display: flex; gap: 8px; margin-top: .6em; }
.surum-sec a { text-decoration: none; border: 1.5px solid var(--cizgi); border-radius: 999px;
               padding: .4em 1em; font-size: clamp(11px, .85vw, 14px); font-weight: 500;
               transition: border-color .15s, background-color .15s; }
.surum-sec a[aria-current="page"] { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }
.surum-sec a:not([aria-current]):hover { border-color: var(--murekkep); }

.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
           gap: clamp(12px, 1.2vw, 20px); padding: 0 var(--kenar) clamp(40px, 5vw, 80px); }

.kart { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
        --pay: clamp(24px, 2.2vw, 32px);
        border-radius: clamp(10px, 1vw, 16px); background: #000; color: #fff; text-decoration: none;
        transition: transform .18s ease, box-shadow .18s ease; }
.kart:hover { transform: translateY(-3px);
              box-shadow: 0 10px 26px color-mix(in srgb, var(--aile) 40%, transparent); }

.kart-tuval { position: absolute; left: 0; top: var(--pay); width: 100%;
              height: calc(100% - var(--pay) * 2); display: block; }
.kart-ust { position: absolute; top: clamp(9px, .8vw, 14px); left: clamp(11px, .9vw, 16px);
            display: flex; align-items: center; gap: .45em; font-size: clamp(8.5px, .68vw, 10.5px);
            font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.kart-ust svg { width: 1.5em; height: 1.5em; flex: none; color: var(--aile); }
.kart-konu { position: absolute; bottom: clamp(9px, .8vw, 14px); left: clamp(11px, .9vw, 16px);
             right: clamp(11px, .9vw, 16px); font-size: clamp(8.5px, .68vw, 10.5px); font-weight: 500;
             letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.nasil { padding: clamp(56px, 7vw, 120px) var(--kenar) clamp(40px, 5vw, 80px); border-top: 1px solid var(--cizgi); }
.nasil h2 { text-align: center; font-size: clamp(22px, 2.4vw, 38px); font-weight: 700; letter-spacing: -.01em; }
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
           gap: clamp(28px, 4vw, 72px); margin-top: clamp(40px, 5vw, 86px); }
.adimlar li { display: grid; gap: .5em; align-content: start; border-bottom: 1px solid var(--cizgi); padding-bottom: clamp(20px, 2.4vw, 34px); }
.sayi { font-size: clamp(44px, 5vw, 78px); font-weight: 400; line-height: 1; color: var(--cizgi); letter-spacing: -.02em; }
.adimlar h3 { font-size: clamp(15px, 1.3vw, 21px); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin-top: .35em; }
.adimlar p { font-size: clamp(13px, .95vw, 15.5px); line-height: 1.6; }

.nasil-bag { margin: clamp(30px, 3.6vw, 56px) 0 0; display: grid; justify-items: center;
             gap: clamp(12px, 1.3vw, 20px); }
.nasil-dugme { display: grid; place-items: center; text-decoration: none;
               padding: clamp(12px, .83vw, 13px) clamp(22px, 2vw, 32px);
               border-radius: 999px; background: var(--murekkep); color: var(--kagit);
               font-weight: 700; font-size: clamp(13px, 1vw, 16px);
               letter-spacing: .01em; line-height: 1;
               transition: transform .2s ease, box-shadow .3s ease; }
.nasil-dugme:hover { transform: scale(1.05);
               box-shadow: 0 0 0 7px color-mix(in srgb, var(--murekkep) 12%, transparent); }

.soz-sizde { padding: clamp(40px, 5vw, 86px) var(--kenar) clamp(32px, 4vw, 64px); }
.soz-kutu { width: min(100%, 880px); margin: 0 auto; display: grid; justify-items: center;
            gap: clamp(14px, 1.6vw, 24px); text-align: center;
            padding: clamp(36px, 4.4vw, 72px) clamp(24px, 3.6vw, 60px);
            border-radius: clamp(16px, 1.8vw, 28px); background: #F1F1F1; }
.soz-kutu h2 { font-size: clamp(22px, 2.4vw, 38px); font-weight: 700; letter-spacing: .005em; }
.soz-kutu p { max-width: 64ch; font-size: clamp(13.5px, 1.05vw, 17px); line-height: 1.65;
              text-wrap: pretty; }
.soz-posta { margin-top: .3em; }
.soz-posta a { display: inline-block; text-decoration: none; font-weight: 700;
               border-radius: 999px; padding: clamp(12px, .83vw, 13px) clamp(22px, 2vw, 32px);
               background: var(--murekkep); color: var(--kagit);
               transition: transform .2s ease, box-shadow .3s ease; }
.soz-posta a:hover { transform: scale(1.05);
               box-shadow: 0 0 0 7px color-mix(in srgb, var(--murekkep) 12%, transparent); }

.alt { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 48px);
       padding: clamp(40px, 6vw, 96px) var(--kenar) clamp(28px, 3.4vw, 52px); }
.alt-not { margin: 0; font-size: clamp(12px, .9vw, 15px); font-weight: 500; color: var(--soluk); }
.alt-yazi { display: grid; gap: .55em; }
.alt-sosyal { display: inline-flex; align-items: center; gap: .5em; justify-self: start;
              text-decoration: none; font-size: clamp(12px, .9vw, 15px); font-weight: 500;
              color: var(--soluk); transition: color .18s; }
.alt-sosyal svg { width: 1.35em; height: 1.35em; flex: none; }
.alt-sosyal:hover { color: var(--murekkep); }
.alt-haklar { margin: 0; max-width: 62ch; font-size: clamp(10.5px, .78vw, 13px); line-height: 1.5;
              color: var(--soluk); text-wrap: pretty; }
.alt-platon { display: block; line-height: 0; transition: opacity .2s; }
.alt-platon:hover { opacity: .7; }
.alt-platon img { display: block; width: clamp(105px, 10.2vw, 151px); height: auto; }

@media (max-width: 860px) {
  .giris { grid-template-columns: 1fr; }
  .sahne { aspect-ratio: 4 / 5; }
  #tuval { height: calc(68% - var(--ust-serit)); }

  .ag-dugme { width: 88px; }
  .paylas { letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}