/* ══════════════════════════════════════════════════════════════ DENİZ NE ÂLEMDE? · Arsuz / Avcılarsuyu Tek dosya stil — harici CDN yok, tüm varlıklar yerel. ══════════════════════════════════════════════════════════════ */ /* ─── 1 · YAZI TİPLERİ (yerel woff2, latin + latin-ext) ─────── latin-ext dosyalari Turkce + Avrupa alt kumesine indirildi (Latin Extended-A + birkac ek): 129 KB -> 55 KB. unicode-range bu yuzden dosyada gercekten bulunan araliktir; genisletilirse once font yeniden alt-kumelenmelidir, yoksa tofu cikar. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap; src:url('../font/inter-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+0218-021B,U+1E9E,U+20A0-20BF;} @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap; src:url('../font/inter-normal-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';font-style:normal;font-weight:500 800;font-display:swap; src:url('../font/playfair-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+0218-021B,U+1E9E,U+20A0-20BF;} @font-face{font-family:'Playfair';font-style:normal;font-weight:500 800;font-display:swap; src:url('../font/playfair-normal-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';font-style:italic;font-weight:500 700;font-display:swap; src:url('../font/playfair-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+0218-021B,U+1E9E,U+20A0-20BF;} @font-face{font-family:'Playfair';font-style:italic;font-weight:500 700;font-display:swap; src:url('../font/playfair-italic-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;} /* ─── 2 · KABUK JETONLARI ────────────────────────────────────── */ :root{ --murekkep:#060B14; --murekkep-2:#0A1220; --kagit:#F5FAFB; --metin:#E9F4F6; --metin-yumusak:#AFC4CE; --sus:#7C93A3; --cizgi:rgba(233,244,246,.13); --cam:rgba(233,244,246,.055); --cam-kuvvetli:rgba(233,244,246,.09); --iyi:#3ED9A4; --orta:#F2C14E; --kotu:#FF6B58; --dz-derin:#0B3F63; --dz-orta:#1585BE; --dz-parlak:#5FD2F2; --dz-vurgu:#5FD2F2; --olcek:clamp(1rem,.86rem + .55vw,1.125rem); --kap:1220px; --bosluk:clamp(1rem,.6rem + 1.6vw,1.75rem); --yuvarlak:18px; --hareket:1; --gecis:.42s cubic-bezier(.22,.61,.36,1); } /* Kademe temaları — */ :root[data-kademe="0"]{--dz-derin:#0B4F4A;--dz-orta:#1FA394;--dz-parlak:#8CF2E2;--dz-vurgu:#8CF2E2;} :root[data-kademe="1"]{--dz-derin:#0A4A55;--dz-orta:#189FB0;--dz-parlak:#79E8F0;--dz-vurgu:#79E8F0;} :root[data-kademe="2"]{--dz-derin:#0B3F63;--dz-orta:#1585BE;--dz-parlak:#5FD2F2;--dz-vurgu:#5FD2F2;} :root[data-kademe="3"]{--dz-derin:#0E3668;--dz-orta:#2071CE;--dz-parlak:#58B4F5;--dz-vurgu:#FFC24D;} :root[data-kademe="4"]{--dz-derin:#122E63;--dz-orta:#2A5FC4;--dz-parlak:#5C9BF5;--dz-vurgu:#FF8A5B;} :root[data-kademe="5"]{--dz-derin:#141C4A;--dz-orta:#2B3A8F;--dz-parlak:#6F82E4;--dz-vurgu:#FF6B45;} :root[data-kademe="6"]{--dz-derin:#0A0D24;--dz-orta:#1A2050;--dz-parlak:#5A66C4;--dz-vurgu:#FF3B2F;} :root[data-vakit="gece"]{--murekkep:#04070E;--murekkep-2:#070C16;} /* ─── 3 · SIFIRLAMA ──────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0;overflow-x:clip; font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:var(--olcek);line-height:1.62; color:var(--metin); background:var(--murekkep); background-image: radial-gradient(1200px 700px at 12% -8%, color-mix(in srgb,var(--dz-derin) 62%, transparent), transparent 68%), radial-gradient(900px 620px at 92% 18%, color-mix(in srgb,var(--dz-orta) 20%, transparent), transparent 70%); background-attachment:scroll; -webkit-font-smoothing:antialiased; transition:background-color var(--gecis); } img,svg,canvas{display:block;max-width:100%;} h1,h2,h3{margin:0;font-family:'Playfair',Georgia,serif;font-weight:700;line-height:1.1;letter-spacing:-.01em;} p{margin:0;} ul,ol,dl,dd{margin:0;padding:0;list-style:none;} a{color:var(--dz-parlak);text-underline-offset:.22em;} button,input,textarea,select{font:inherit;color:inherit;} :focus-visible{outline:3px solid var(--dz-parlak);outline-offset:3px;border-radius:6px;} .gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .atla{position:absolute;left:-999px;top:0;z-index:99;background:var(--dz-parlak);color:#06121A;padding:.7em 1.2em;border-radius:0 0 12px 0;font-weight:700;} .atla:focus{left:0;} .kap{width:min(100% - 2*var(--bosluk),var(--kap));margin-inline:auto;} .kap-dar{max-width:820px;} /* Sayılar hep aynı genişlikte — sayaç animasyonunda zıplama olmasın */ .sayac,.kart-sayi,.gosterge-sayi,.hs-sayi,table{font-variant-numeric:tabular-nums lining-nums;} /* ─── 4 · KAHRAMAN ───────────────────────────────────────────── */ .kahraman{ position:relative;isolation:isolate; min-height:100svh;min-height:100dvh; display:flex;flex-direction:column;justify-content:flex-end; padding:calc(var(--bosluk) + 2rem) 0 clamp(5rem,14vh,9rem); overflow:hidden; } .kahraman-arka{position:absolute;inset:0;z-index:-3;} .kahraman-arka img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%; opacity:0;transition:opacity 1.1s ease;will-change:opacity; } .kahraman-arka img.gorunur{opacity:1;} .kahraman-perde{ position:absolute;inset:0;z-index:-2; background: linear-gradient(180deg,rgba(4,8,15,.72) 0%,rgba(4,8,15,.26) 30%,rgba(4,8,15,.62) 66%,var(--murekkep) 99%), linear-gradient(75deg,rgba(4,8,15,.86) 0%,rgba(4,8,15,.52) 38%,rgba(4,8,15,.06) 74%), radial-gradient(120% 80% at 8% 88%, rgba(4,8,15,.72), transparent 62%); } .kahraman-govde{position:relative;z-index:2;width:min(100% - 2*var(--bosluk),var(--kap));margin-inline:auto;} .ust-etiket{ display:inline-flex;align-items:flex-start;gap:.6em; font-size:.76rem;letter-spacing:.16em;text-transform:none; color:var(--metin-yumusak);font-weight:600; padding:.45em .95em;border:1px solid var(--cizgi);border-radius:999px; background:rgba(6,11,20,.45);backdrop-filter:blur(6px); } .nabiz{width:8px;height:8px;flex:0 0 auto;margin-top:.42em;border-radius:50%;background:var(--iyi);box-shadow:0 0 0 0 color-mix(in srgb,var(--iyi) 70%,transparent);animation:nabiz 2.4s ease-out infinite;} @keyframes nabiz{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--iyi) 65%,transparent);}70%{box-shadow:0 0 0 11px transparent;}100%{box-shadow:0 0 0 0 transparent;}} .dev-baslik{ margin:.42em 0 0; font-size:clamp(2.35rem,1.1rem + 8.4vw,6.6rem); line-height:.96;letter-spacing:-.025em; text-wrap:balance; background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 52%,var(--dz-parlak) 118%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 2px rgba(2,6,12,.85)) drop-shadow(0 10px 34px rgba(2,6,12,.7)); animation:yukselGel .9s cubic-bezier(.2,.7,.3,1) both; } .dev-alt{ margin-top:.75em;max-width:36ch; font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:500; font-size:clamp(1.08rem,.95rem + .8vw,1.6rem);line-height:1.4; color:#F2FAFC;text-shadow:0 2px 4px rgba(2,6,12,.9),0 6px 26px rgba(2,6,12,.7); animation:yukselGel .9s .1s cubic-bezier(.2,.7,.3,1) both; } @keyframes yukselGel{from{opacity:0;transform:translate3d(0,26px,0);}to{opacity:1;transform:none;}} .hs-blok{ display:flex;align-items:flex-end;gap:.85rem;margin-top:1.5rem; animation:yukselGel .9s .2s cubic-bezier(.2,.7,.3,1) both; } .hs-sayi{font-family:'Playfair',Georgia,serif;font-weight:800;line-height:.85; font-size:clamp(3rem,1.6rem + 7vw,5.4rem);color:#fff;text-shadow:0 2px 3px rgba(2,6,12,.9),0 8px 32px rgba(2,6,12,.65);} .hs-sayi .birim{font-size:.32em;font-weight:600;margin-left:.12em;color:var(--dz-parlak);font-family:'Inter',sans-serif;} .hs-yazi{padding-bottom:.55rem;font-size:.86rem;line-height:1.35;color:#D3E3EA;text-shadow:0 1px 3px rgba(2,6,12,.9);} .hs-yazi strong{display:block;color:#fff;font-weight:700;font-size:.95rem;} .kahraman-rozetler{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem; animation:yukselGel .9s .3s cubic-bezier(.2,.7,.3,1) both;} .rozet{ display:inline-flex;align-items:center;gap:.5em; padding:.5em 1em;border-radius:999px;font-size:.8rem;font-weight:600; background:rgba(6,11,20,.55);border:1px solid var(--cizgi);color:var(--metin); backdrop-filter:blur(8px); } .rozet b{color:#fff;} .rozet-skor{background:color-mix(in srgb,var(--dz-orta) 34%,rgba(6,11,20,.6));border-color:color-mix(in srgb,var(--dz-parlak) 40%,transparent);} .rozet-gece{background:rgba(20,18,50,.62);border-color:rgba(150,150,255,.34);} .rozet-iskelet{color:var(--sus);} .rozet i{width:7px;height:7px;border-radius:50%;background:currentColor;} .rozet-guven-yuksek{color:var(--iyi);} .rozet-guven-orta{color:var(--orta);} .rozet-guven-dusuk{color:var(--kotu);} .asagi-ok{ display:inline-flex;margin-top:1.9rem;width:44px;height:44px;align-items:center;justify-content:center; border:1px solid var(--cizgi);border-radius:50%;color:var(--metin-yumusak);background:rgba(6,11,20,.4); animation:zipla 2.6s ease-in-out infinite; } .asagi-ok svg{width:20px;height:20px;} @keyframes zipla{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,7px,0);}} /* Dalga katmanları */ .dalgalar{position:absolute;left:0;right:0;bottom:-1px;height:clamp(90px,15vh,170px);z-index:1;pointer-events:none;} .dalga{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;} .dalga path{fill:currentColor;} .dalga-1{color:color-mix(in srgb,var(--murekkep) 92%,var(--dz-derin));animation:kay 19s linear infinite;} .dalga-2{color:color-mix(in srgb,var(--dz-derin) 62%,var(--murekkep));opacity:.72;animation:kay 27s linear infinite reverse;} .dalga-3{color:color-mix(in srgb,var(--dz-orta) 34%,var(--murekkep));opacity:.5;animation:kay 35s linear infinite;} @keyframes kay{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} .kopuk-tuval{position:absolute;inset:0;width:100%;height:100%;opacity:.85;} /* ─── 5b · GÜVENLİK UYARI BANDI (kademe 4+) ──────────────────── */ .uyari-band{ position:relative;z-index:3; background:linear-gradient(100deg,color-mix(in srgb,var(--dz-vurgu) 26%,var(--murekkep)),color-mix(in srgb,var(--dz-vurgu) 8%,var(--murekkep))); border-block:1px solid color-mix(in srgb,var(--dz-vurgu) 46%,transparent); } .uyari-ic{display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 0;} .uyari-ikon{width:26px;height:26px;flex:none;color:var(--dz-vurgu);margin-top:.1rem; animation:uyariNabiz 2.2s ease-in-out infinite;} @keyframes uyariNabiz{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}} .uyari-band strong{display:block;font-size:.78rem;letter-spacing:.14em;color:var(--dz-vurgu);} .uyari-band p{margin-top:.2rem;font-size:.95rem;line-height:1.5;color:#FFF3EE;text-wrap:pretty;} :root[data-hareket="sakin"] .uyari-ikon{animation:none!important;} /* ─── 5 · BÖLÜM ÇATISI ───────────────────────────────────────── */ .bolum{padding:clamp(3.2rem,7vw,6rem) 0;position:relative;} .bolum-bas{max-width:60ch;margin-bottom:clamp(1.5rem,3vw,2.4rem);} .bolum-bas h2{ font-size:clamp(1.55rem,1.1rem + 2.2vw,2.75rem); background:linear-gradient(170deg,#fff,var(--dz-parlak) 145%); -webkit-background-clip:text;background-clip:text;color:transparent; } .bolum-bas p{margin-top:.5em;color:var(--metin-yumusak);font-size:.98rem;} /* Kart temeli */ .kart{ position:relative;overflow:hidden; padding:1.15rem 1.15rem 1.25rem; border:1px solid var(--cizgi);border-radius:var(--yuvarlak); background:linear-gradient(160deg,var(--cam-kuvvetli),var(--cam)); transition:transform var(--gecis),border-color var(--gecis),box-shadow var(--gecis); } .kart::before{ content:"";position:absolute;inset:0 0 auto;height:2px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--dz-parlak) 70%,transparent),transparent); opacity:.55; } @media (hover:hover){ .kart:hover{transform:translate3d(0,-4px,0);border-color:color-mix(in srgb,var(--dz-parlak) 34%,transparent); box-shadow:0 18px 44px -22px color-mix(in srgb,var(--dz-orta) 70%,transparent);} } .kart-bas{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;} .kart-etiket{font-size:.74rem;font-weight:700;letter-spacing:.13em;color:var(--metin-yumusak);} .kart-kaynak{font-size:.66rem;color:var(--sus);border:1px solid var(--cizgi);border-radius:999px;padding:.18em .6em;} .kart-kaynak.mgm-ayrik{color:var(--orta);border-color:color-mix(in srgb,var(--orta) 55%,transparent);} .kart-uyari{margin-top:.5rem;font-size:.76rem;line-height:1.45;color:var(--orta);} .kart-govde{margin-top:.55rem;} .kart-sayi{font-family:'Playfair',Georgia,serif;font-weight:700;font-size:clamp(2rem,1.4rem + 2.2vw,2.9rem);line-height:1;color:#fff;} .kart-sayi.kucuk{font-size:1.85rem;} .kart-sayi .birim{font-family:'Inter',sans-serif;font-size:.4em;font-weight:600;color:var(--dz-parlak);margin-left:.16em;} .kart-alt{margin-top:.4rem;font-size:.8rem;color:var(--metin-yumusak);} .kart-alt strong{color:#fff;} .kart-insan{margin-top:.5rem;font-size:.88rem;line-height:1.45;color:var(--metin-yumusak);text-wrap:pretty;} .pano-izgara{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));} .kart-genis{grid-column:span 1;} @media (min-width:760px){.kart-genis{grid-column:span 2;}} /* Kart giriş animasyonu */ .kart{opacity:0;transform:translate3d(0,18px,0);} .kart.gorunur{opacity:1;transform:none;transition:opacity .6s ease var(--gec,0s),transform .6s cubic-bezier(.2,.7,.3,1) var(--gec,0s),border-color var(--gecis),box-shadow var(--gecis);} /* Su cetveli (insan siluetli) */ .su-cetveli{display:flex;align-items:center;gap:.9rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--cizgi);} .silüet{width:74px;height:74px;flex:none;color:var(--metin-yumusak);overflow:hidden;border-radius:10px; background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--dz-derin) 40%,transparent));} .silüet .su{fill:color-mix(in srgb,var(--dz-orta) 55%,transparent);transition:y 1.1s cubic-bezier(.3,.8,.3,1);} .silüet .su-cizgi{stroke:var(--dz-parlak);stroke-width:2.5;transition:transform 1.1s cubic-bezier(.3,.8,.3,1);} .cetvel-yazi{font-size:.84rem;color:var(--metin-yumusak);line-height:1.4;} .cetvel-not{display:block;margin-top:.3rem;font-size:.7rem;color:var(--sus);line-height:1.35;} /* Periyot çizgileri */ .periyot-cizgi{display:flex;gap:5px;margin-top:.9rem;height:26px;align-items:flex-end;} .periyot-cizgi span{flex:1;border-radius:99px;background:color-mix(in srgb,var(--dz-parlak) 45%,transparent); height:35%;animation:nefes 3.4s ease-in-out infinite;transform-origin:bottom;} .periyot-cizgi span:nth-child(2){animation-delay:-1.1s;height:65%;} .periyot-cizgi span:nth-child(3){animation-delay:-2.2s;height:50%;} @keyframes nefes{0%,100%{transform:scaleY(.55);opacity:.55;}50%{transform:scaleY(1);opacity:1;}} /* Pusula */ .pusula-govde{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .pusula{width:96px;height:96px;flex:none;} .pusula-halka{fill:none;stroke:var(--cizgi);stroke-width:1.4;} .pusula-halka.ince{stroke-dasharray:2 6;opacity:.6;} .pusula-harf{font-size:11px;font-weight:700;fill:var(--sus);text-anchor:middle;font-family:'Inter',sans-serif;} .pusula-ibre{transform-origin:50px 50px;transition:transform 1.2s cubic-bezier(.34,1.2,.4,1);} .pusula-ibre path{fill:var(--dz-parlak);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--dz-parlak) 60%,transparent));} .ibre-ruzgar path{fill:var(--dz-vurgu);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--dz-vurgu) 55%,transparent));} .ruzgar-sayilar{min-width:min(100%,190px);flex:1;} /* Termometre */ .termo-govde{display:flex;align-items:center;gap:1rem;} .termometre{width:34px;height:110px;flex:none;} .termo-boru{fill:rgba(255,255,255,.08);} .termo-hazne{fill:var(--dz-vurgu);} .termo-dolgu{fill:var(--dz-vurgu);transform-origin:12px 76px;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.3,.8,.3,1);} /* UV şerit */ .uv-serit{position:relative;height:9px;border-radius:99px;margin-top:1rem; background:linear-gradient(90deg,#3ED9A4,#B8E04A 28%,#F2C14E 50%,#FF8A5B 70%,#FF5470 86%,#B44DE0);} .uv-imlec{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:#fff; border:3px solid var(--murekkep);transform:translate(-50%,-50%);transition:left 1.1s cubic-bezier(.3,.8,.3,1); box-shadow:0 2px 10px rgba(0,0,0,.5);} /* ─── 6 · SKOR ───────────────────────────────────────────────── */ .bolum-skor{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--dz-derin) 26%,transparent) 45%,transparent);} .skor-kutu{display:flex;gap:clamp(1.2rem,4vw,2.8rem);align-items:center;flex-wrap:wrap; padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--cizgi);border-radius:24px; background:linear-gradient(155deg,var(--cam-kuvvetli),transparent);} .gosterge{position:relative;width:min(230px,58vw);aspect-ratio:1;flex:none;margin-inline:auto;} .gosterge svg{width:100%;height:100%;transform:rotate(-90deg);} .gosterge circle{fill:none;stroke-width:14;stroke-linecap:round;} .gosterge-iz{stroke:rgba(255,255,255,.09);} .gosterge-bant{stroke:color-mix(in srgb,var(--dz-parlak) 30%,transparent);stroke-width:14; stroke-dasharray:0 528;transition:stroke-dasharray 1.4s cubic-bezier(.3,.8,.3,1);} .gosterge-yay{stroke:var(--skor-renk,var(--dz-parlak));stroke-dasharray:0 528; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--skor-renk,var(--dz-parlak)) 55%,transparent)); transition:stroke-dasharray 1.5s cubic-bezier(.3,.8,.3,1),stroke .6s ease;} .gosterge-ic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;} .gosterge-sayi{font-family:'Playfair',Georgia,serif;font-weight:800;font-size:clamp(2.8rem,10vw,3.9rem);line-height:1;color:#fff;} .gosterge-birim{font-size:.78rem;color:var(--sus);letter-spacing:.1em;} .skor-yazi{flex:1;min-width:min(100%,270px);} .skor-bant{font-family:'Playfair',Georgia,serif;font-size:clamp(1.35rem,1rem + 1.6vw,2rem);font-weight:700;color:#fff;line-height:1.15;} .skor-aciklama{margin-top:.5rem;color:var(--metin-yumusak);} .skor-kirilim{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;} .skor-kirilim li{font-size:.74rem;padding:.35em .75em;border-radius:99px;border:1px solid var(--cizgi);color:var(--metin-yumusak);background:rgba(255,255,255,.03);} .skor-kirilim li b{color:#fff;} .skor-uyari{margin-top:1.1rem;font-size:.78rem;color:var(--sus);border-left:2px solid var(--dz-vurgu);padding-left:.8rem;} /* ─── 7 · 24 SAAT ────────────────────────────────────────────── */ .pencere-liste{display:grid;gap:.7rem;margin-bottom:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));} .pencere{ position:relative;overflow:hidden;padding:1rem 1.1rem;border-radius:16px; border:1px solid color-mix(in srgb,var(--dz-parlak) 32%,transparent); background:linear-gradient(150deg,color-mix(in srgb,var(--dz-orta) 30%,transparent),transparent 75%); } .pencere.altin{border-color:color-mix(in srgb,var(--orta) 55%,transparent); background:linear-gradient(150deg,color-mix(in srgb,var(--orta) 22%,transparent),transparent 75%);} .pencere.gece{border-color:rgba(150,150,255,.3);background:linear-gradient(150deg,rgba(60,60,140,.3),transparent 78%);} .pencere-etiket{font-size:.7rem;letter-spacing:.14em;font-weight:700;color:var(--dz-parlak);} .pencere.altin .pencere-etiket{color:var(--orta);} .pencere.gece .pencere-etiket{color:#A8AEFF;} .pencere-saat{font-family:'Playfair',Georgia,serif;font-size:1.7rem;font-weight:700;color:#fff;margin-top:.15rem;line-height:1.1;} .pencere-metin{margin-top:.4rem;font-size:.88rem;color:var(--metin-yumusak);text-wrap:pretty;} .pencere-cizgi{display:flex;gap:.8rem;margin-top:.6rem;font-size:.74rem;color:var(--sus);} .pencere-cizgi b{color:#fff;} .pencere-olcu{margin-top:.3rem;opacity:.85;} .pencere-yok{padding:1.1rem;border:1px dashed var(--cizgi);border-radius:16px;color:var(--metin-yumusak);font-size:.9rem;} .grafik-kutu{margin:0;border:1px solid var(--cizgi);border-radius:20px;padding:1rem .6rem 1rem;background:linear-gradient(160deg,var(--cam),transparent);} .grafik-efsane{display:flex;flex-wrap:wrap;gap:1rem;padding:0 .6rem .8rem;font-size:.74rem;color:var(--metin-yumusak);} .efsane{display:inline-flex;align-items:center;gap:.45em;} .efsane i{width:14px;height:9px;border-radius:3px;} .ef-alan{background:color-mix(in srgb,var(--dz-orta) 70%,transparent);} .ef-cizgi{background:var(--dz-vurgu);height:3px;border-radius:99px;} .ef-gece{background:rgba(120,120,200,.4);} .ef-pencere{background:color-mix(in srgb,var(--orta) 45%,transparent);border:1px solid color-mix(in srgb,var(--orta) 60%,transparent);} .grafik-kaydir{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:.4rem;} /* Mobilde grafik 720px, kutu ~340px: devami oldugu gorunsun diye sag kenar soluyor */ @media (max-width:760px){ .grafik-kaydir{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%); } } .grafik-not{margin:.55rem .6rem 0;font-size:.74rem;line-height:1.45;color:var(--metin-yumusak);} .grafik-ipucu{margin:.3rem .6rem 0;font-size:.72rem;color:var(--sus);display:none;} @media (max-width:760px){ .grafik-ipucu{display:block;} } .grafik-ic{min-width:720px;padding:0 .4rem;} .grafik-ic svg{width:100%;max-width:none;height:auto;} .g-alan{fill:url(#gAlanGrad);} .g-cizgi{fill:none;stroke:var(--dz-parlak);stroke-width:2;stroke-linejoin:round;} .g-skor{fill:none;stroke:var(--dz-vurgu);stroke-width:2;stroke-dasharray:4 4;stroke-linejoin:round;} .g-gece{fill:rgba(120,120,200,.13);} .g-izgara{stroke:rgba(255,255,255,.09);stroke-width:1;} .g-yazi{font-size:10px;fill:var(--sus);font-family:'Inter',sans-serif;} .g-yazi.vurgu{fill:var(--metin);font-weight:700;} .g-ok{stroke:var(--metin-yumusak);stroke-width:1.5;fill:none;stroke-linecap:round;} .g-pencere{fill:color-mix(in srgb,var(--orta) 13%,transparent);} .g-simdi{stroke:#fff;stroke-width:1.5;stroke-dasharray:3 3;} .gizli-tablo{display:none;width:100%;border-collapse:collapse;margin-top:1rem;font-size:.82rem;} .gizli-tablo.acik{display:table;} .gizli-tablo caption{text-align:left;color:var(--sus);font-size:.76rem;padding:.4rem .6rem;} .gizli-tablo th,.gizli-tablo td{padding:.35rem .6rem;border-bottom:1px solid var(--cizgi);text-align:right;} .gizli-tablo th:first-child,.gizli-tablo td:first-child{text-align:left;} .gizli-tablo thead th{color:var(--metin-yumusak);font-size:.72rem;letter-spacing:.08em;} .gizli-tablo tr.gece-satir td{color:#A8AEFF;} .cizgi-dugme{background:none;border:none;color:var(--dz-parlak);cursor:pointer;padding:.6rem .2rem;font-size:.82rem; text-decoration:underline;text-underline-offset:.25em;} /* ─── 8 · RÜZGÂR ANLATIMI ────────────────────────────────────── */ .bolum-ruzgar{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--dz-derin) 20%,transparent) 50%,transparent);} .ruzgar-anlatim{display:grid;gap:1.6rem;grid-template-columns:1fr;} @media (min-width:900px){.ruzgar-anlatim{grid-template-columns:1.05fr 1fr;align-items:center;}} .ruzgar-sema{border:1px solid var(--cizgi);border-radius:20px;overflow:hidden;background:var(--cam);} .ruzgar-sema svg{width:100%;height:auto;} .sema-kara{fill:color-mix(in srgb,#3A2E1E 70%,var(--murekkep));} .sema-kiyi{fill:none;stroke:var(--dz-parlak);stroke-width:2;opacity:.65;} .sema-yazi{font-size:11px;fill:var(--metin-yumusak);font-family:'Inter',sans-serif;letter-spacing:.1em;text-anchor:middle;font-weight:600;} .sema-yazi.kucuk{font-size:9px;fill:var(--sus);} .sema-ok path{stroke-width:3;stroke-linecap:round;fill:none;} .sema-ok-deniz path{stroke:var(--kotu);} .sema-ok-kara path{stroke:var(--iyi);} .sema-ok{opacity:.28;transition:opacity .5s ease;} .sema-ok.etkin{opacity:1;animation:okAk 2.6s ease-in-out infinite;} @keyframes okAk{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(10px,0,0);}} .sema-ok-kara.etkin{animation-name:okAkTers;} @keyframes okAkTers{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(-10px,0,0);}} .sema-imlec circle{fill:var(--dz-vurgu);filter:drop-shadow(0 0 10px var(--dz-vurgu));} .sema-imlec{transition:transform 1s cubic-bezier(.3,.8,.3,1);} .ruzgar-durum{padding:1rem 1.15rem;border-radius:16px;border:1px solid var(--cizgi);background:var(--cam-kuvvetli);margin-bottom:1.2rem;} .ruzgar-durum-etiket{display:block;font-size:.72rem;letter-spacing:.14em;font-weight:700;color:var(--dz-vurgu);} .ruzgar-durum p{margin-top:.35rem;font-family:'Playfair',Georgia,serif;font-size:1.15rem;line-height:1.35;color:#fff;} .ruzgar-sozluk>div{padding:.85rem 0;border-top:1px solid var(--cizgi);} .ruzgar-sozluk dt{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--dz-parlak);} .ruzgar-sozluk dd{margin-top:.25rem;font-size:.9rem;color:var(--metin-yumusak);} .ruzgar-sozluk dd strong{color:#fff;} /* ─── 9 · AI KUTUSU ──────────────────────────────────────────── */ .ai-kutu{position:relative;overflow:hidden;padding:clamp(1.3rem,4vw,2.2rem);border-radius:24px; border:1px solid color-mix(in srgb,var(--dz-parlak) 26%,transparent); background:linear-gradient(150deg,color-mix(in srgb,var(--dz-orta) 22%,transparent),transparent 70%);} .ai-kutu::after{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-140px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--dz-parlak) 26%,transparent),transparent 68%); animation:sal 12s ease-in-out infinite;pointer-events:none;} @keyframes sal{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-26px,22px,0) scale(1.14);}} .ai-bas{display:flex;align-items:center;gap:.7rem;} .ai-ikon{width:34px;height:34px;color:var(--dz-parlak);flex:none;animation:parla 4s ease-in-out infinite;} @keyframes parla{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}} .ai-bas h2{font-size:clamp(1.25rem,1rem + 1.3vw,1.85rem);color:#fff;} .ai-metin{margin-top:1rem;font-size:clamp(1rem,.94rem + .4vw,1.16rem);line-height:1.68;color:#EDF6F8;text-wrap:pretty;} .ai-metin p+p{margin-top:.8em;} .ai-uyari{ margin-top:1rem;padding:.75rem .9rem;font-size:.84rem;line-height:1.5; border-left:3px solid var(--orta);border-radius:0 8px 8px 0; background:color-mix(in srgb,var(--orta) 10%,transparent);color:#F3E7CE; } .ai-uyari strong{color:var(--orta);} .ai-alt{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.3rem;padding-top:.9rem;border-top:1px solid var(--cizgi); font-size:.75rem;color:var(--sus);} .ai-yaziyor::after{content:"▍";animation:imlecYanip .9s steps(2) infinite;color:var(--dz-parlak);} @keyframes imlecYanip{50%{opacity:0;}} /* ─── 10 · KAYNAKLAR ─────────────────────────────────────────── */ .guven-serit{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:16px;margin-bottom:1.4rem; border:1px solid var(--guven-renk,var(--cizgi));background:color-mix(in srgb,var(--guven-renk,var(--dz-orta)) 12%,transparent);} .guven-nokta{width:10px;height:10px;border-radius:50%;background:var(--guven-renk,var(--dz-parlak));margin-top:.5em;flex:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--guven-renk,var(--dz-parlak)) 22%,transparent);} .guven-serit strong{color:#fff;font-size:.95rem;} .guven-serit p{margin-top:.2rem;font-size:.86rem;color:var(--metin-yumusak);} .kaynak-izgara{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));} .kaynak-kart{padding:1.15rem;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);background:var(--cam);} .kaynak-kart h3{font-size:1.02rem;color:#fff;} .kaynak-ad{margin-top:.3rem;font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--dz-parlak);} .kaynak-kart p{margin-top:.45rem;font-size:.86rem;color:var(--metin-yumusak);} .kaynak-sik{color:var(--sus)!important;font-size:.74rem!important;} .durust-metin{margin-top:1.6rem;padding:clamp(1.1rem,3vw,1.8rem);border-radius:20px;background:var(--cam);border:1px solid var(--cizgi);} .durust-metin p{color:var(--metin-yumusak);font-size:.95rem;line-height:1.7;text-wrap:pretty;} .durust-metin p+p{margin-top:.9em;} .durust-metin strong{color:#fff;} /* ─── 11 · FORMLAR & YORUMLAR ────────────────────────────────── */ .form{display:grid;gap:1rem;padding:clamp(1.1rem,3vw,1.6rem);border:1px solid var(--cizgi);border-radius:20px; background:linear-gradient(160deg,var(--cam-kuvvetli),transparent);margin-bottom:1.6rem;} .alan{display:grid;gap:.35rem;} .alan label{font-size:.8rem;font-weight:600;color:var(--metin-yumusak);} .zorunlu{color:var(--dz-vurgu);} .istege-bagli{font-weight:400;color:var(--sus);} .alan input,.alan textarea{ width:100%;padding:.75em .9em;border-radius:12px;background:rgba(6,11,20,.5); border:1px solid var(--cizgi);color:var(--metin);transition:border-color .25s ease,background .25s ease; font-size:1rem;/* iOS zoom engeli */ } .alan textarea{resize:vertical;min-height:5.5em;line-height:1.5;} .alan input:focus,.alan textarea:focus{border-color:var(--dz-parlak);background:rgba(6,11,20,.72);} .alan input[aria-invalid="true"],.alan textarea[aria-invalid="true"]{border-color:var(--kotu);} .alan-alt{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;} .sayac-yazi{font-size:.72rem;color:var(--sus);white-space:nowrap;} .hata{font-size:.78rem;color:var(--kotu);} .gizli-alan{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;} .form-alt{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;} .form-durum{font-size:.82rem;color:var(--metin-yumusak);} .form-durum.basarili{color:var(--iyi);} .form-durum.hatali{color:var(--kotu);} .dugme{ border:none;cursor:pointer;padding:.8em 1.6em;border-radius:999px;font-weight:700;font-size:.92rem; transition:transform .18s ease,box-shadow .25s ease,filter .25s ease; } .dugme-birincil{background:linear-gradient(120deg,var(--dz-parlak),var(--dz-orta));color:#04121B; box-shadow:0 10px 26px -14px color-mix(in srgb,var(--dz-parlak) 90%,transparent);} .dugme:hover{transform:translate3d(0,-2px,0);filter:brightness(1.07);} .dugme:active{transform:translate3d(0,0,0);} .dugme[disabled]{opacity:.55;cursor:progress;transform:none;} .yorum-liste{display:grid;gap:.7rem;} .yorum{padding:1rem 1.1rem;border:1px solid var(--cizgi);border-radius:16px;background:var(--cam);} .yorum.yeni{animation:yorumGel .6s cubic-bezier(.2,.7,.3,1) both;} @keyframes yorumGel{from{opacity:0;transform:translate3d(0,-12px,0);}to{opacity:1;transform:none;}} .yorum-bas{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline;flex-wrap:wrap;} .yorum-isim{font-weight:700;color:#fff;font-size:.94rem;} .yorum-zaman{font-size:.72rem;color:var(--sus);} .yorum-metin{margin-top:.4rem;font-size:.92rem;color:var(--metin-yumusak);line-height:1.55;overflow-wrap:anywhere;text-wrap:pretty;} .yorum-rozet{font-size:.66rem;color:var(--dz-parlak);border:1px solid var(--cizgi);border-radius:99px;padding:.12em .6em;} .iskelet-satir{padding:1rem;color:var(--sus);font-size:.88rem;} /* ─── 12 · MODAL & BİLDİRİM ──────────────────────────────────── */ .modal{ width:min(100% - 2rem,560px);border:1px solid var(--cizgi);border-radius:22px;padding:0; background:var(--murekkep-2);color:var(--metin);box-shadow:0 40px 90px -30px rgba(0,0,0,.9); } .modal::backdrop{background:rgba(4,8,15,.78);backdrop-filter:blur(5px);} .modal[open]{animation:modalGel .35s cubic-bezier(.2,.7,.3,1);} @keyframes modalGel{from{opacity:0;transform:translate3d(0,20px,0) scale(.97);}to{opacity:1;transform:none;}} .modal .form{margin:0;border:none;background:none;padding:clamp(1.2rem,4vw,1.8rem);} .modal-bas{display:flex;justify-content:space-between;align-items:center;gap:1rem;} .modal-bas h2{font-size:1.45rem;color:#fff;} .modal-alt-yazi{font-size:.88rem;color:var(--metin-yumusak);margin-top:-.4rem;} .modal-kapat{width:40px;height:40px;border-radius:50%;border:1px solid var(--cizgi);background:transparent;cursor:pointer; display:grid;place-items:center;color:var(--metin-yumusak);flex:none;} .modal-kapat svg{width:20px;height:20px;} .modal-kapat:hover{background:var(--cam);color:#fff;} .bildirim{ position:fixed;left:50%;bottom:max(1.2rem,env(safe-area-inset-bottom));transform:translate3d(-50%,120%,0); z-index:60;padding:.85em 1.3em;border-radius:999px;font-size:.88rem;font-weight:600; background:var(--murekkep-2);border:1px solid var(--dz-parlak);color:#fff; box-shadow:0 20px 50px -20px rgba(0,0,0,.9);max-width:calc(100vw - 2rem);text-align:center; transition:transform .45s cubic-bezier(.2,.7,.3,1); } .bildirim.acik{transform:translate3d(-50%,0,0);} .bildirim.hatali{border-color:var(--kotu);} /* ─── 13 · DİP ───────────────────────────────────────────────── */ .dip{padding:clamp(2.5rem,6vw,4rem) 0 calc(2rem + env(safe-area-inset-bottom)); border-top:1px solid var(--cizgi);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--dz-derin) 30%,transparent));} .dip-ust{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;} .dip-ad{font-family:'Playfair',Georgia,serif;font-weight:800;font-size:1.35rem;color:#fff;letter-spacing:-.01em;} .dip-slogan{margin-top:.4rem;max-width:44ch;font-size:.88rem;color:var(--metin-yumusak);} .dip-menu{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;font-size:.86rem;} .dip-menu a{ color:var(--metin-yumusak);text-decoration:none; display:inline-flex;align-items:center;min-height:44px;padding-block:.35rem; } .dip-menu a:hover{color:var(--dz-parlak);} .dip-ayar{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--cizgi);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-start;} .anahtar{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.84rem;color:var(--metin-yumusak);flex:none;} .anahtar input{position:absolute;opacity:0;width:0;height:0;} .anahtar-govde{width:44px;height:25px;border-radius:99px;background:rgba(255,255,255,.13);position:relative;transition:background .3s ease;flex:none;} .anahtar-govde::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.3,.8,.3,1);} .anahtar input:checked+.anahtar-govde{background:var(--dz-orta);} .anahtar input:checked+.anahtar-govde::after{transform:translate3d(19px,0,0);} .anahtar input:focus-visible+.anahtar-govde{outline:3px solid var(--dz-parlak);outline-offset:3px;} .dip-sorumluluk{flex:1;min-width:min(100%,280px);font-size:.76rem;color:var(--sus);line-height:1.6;} .dip-sorumluluk strong{color:var(--metin-yumusak);} .dip-alt{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--cizgi);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;align-items:center;} .watermark{ font-family:'Playfair',Georgia,serif;font-size:1.02rem;letter-spacing:.02em;color:var(--metin-yumusak); } .watermark strong{ font-weight:700; background:linear-gradient(100deg,var(--dz-parlak),#fff 60%,var(--dz-parlak)); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:parilti 7s linear infinite; } @keyframes parilti{from{background-position:220% 0;}to{background-position:-20% 0;}} .dip-zaman{font-size:.74rem;color:var(--sus);} /* ─── 14 · HAREKETİ AZALT ────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.18s!important;} .kart{opacity:1;transform:none;} } :root[data-hareket="sakin"] .dalga, :root[data-hareket="sakin"] .asagi-ok, :root[data-hareket="sakin"] .nabiz, :root[data-hareket="sakin"] .ai-kutu::after, :root[data-hareket="sakin"] .ai-ikon, :root[data-hareket="sakin"] .periyot-cizgi span, :root[data-hareket="sakin"] .sema-ok.etkin, :root[data-hareket="sakin"] .watermark strong{animation:none!important;} :root[data-hareket="sakin"] .kart{opacity:1!important;transform:none!important;} :root[data-hareket="sakin"] .kopuk-tuval{display:none;} :root[data-hareket="sakin"] .dev-baslik, :root[data-hareket="sakin"] .dev-alt, :root[data-hareket="sakin"] .hs-blok, :root[data-hareket="sakin"] .kahraman-rozetler{animation:none!important;opacity:1;transform:none;} /* ─── 15 · İNCE AYAR ─────────────────────────────────────────── */ @media (max-width:420px){ .hs-blok{gap:.6rem;align-items:baseline;} .hs-yazi{padding-bottom:0;font-size:.78rem;} .pusula{width:78px;height:78px;} .skor-kutu{padding:1rem;} } @media print{ .dalgalar,.asagi-ok,.form,.modal,.bildirim{display:none!important;} body{background:#fff;color:#111;} } /* ── EREN PARK kimlik vurgusu (18 Ağu, kullanıcı isteği) ───────── */ .ust-etiket{ font-size:.84rem; padding:.5em 1.1em; } .marka-vurgu{ font-weight:800; letter-spacing:.2em; color:var(--metin); font-size:1.02em; text-shadow:0 1px 12px rgba(0,0,0,.45); } .marka-ayrac{ opacity:.45; margin:0 .55em; font-weight:400; } @media (max-width:420px){ .ust-etiket{ font-size:.76rem; padding:.45em .85em; } .marka-vurgu{ letter-spacing:.14em; } }