/* ===================================================================== İCAN'S UI KIT · ortak/ui-kit.css · SİTENİN TEK STİL KAYNAĞI Kurallar (ayrıntı: ortak/README.md): 1. Sayfalar stili yalnız buradan alır; yeni tarz önce buraya eklenir, sayfa sınıfla çağırır. 2. Satır içi style="" yok (HTML'de de JS'te de). Dinamik değer: data- özniteliği + buradaki kural. 3. Header, menü, altbilgi, alt çubuk tek şablondan (ortak/ust.js); görünümü bu dosyada. 4. ui-kit.html de bu dosyayı yükler: burada değişen her şey kitte ve sitede birlikte değişir. Bölümler: tokenlar · temel · yazı · düğme · üst (şerit, header, mega, açılır, çekmece) · sunum aracı · ana sayfa bölümleri · altbilgi · alt çubuk · hareket · ortak içerik · kategori (kat-) · takım (tk-) · gelecek bileşenler (kit) · yardımcı sınıflar ===================================================================== */ /* ==== TOKENLAR (UI kit adlarıyla; kartela uygulanmış hâli) ==== */ :root{ /* etkileşim token'ları (03.11): hızlı geçiş (renk/ok/düğme), standart geçiş (çizgi, dolgu, görsel), hover ölçeği, ok kayması, çizgi kalınlığı */ --gecis-hizli:.2s;--gecis:.35s;--hover-olcek:1.02;--ok-kayma:4px;--cizgi-kalinlik:1.5px; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px; --ink:#2b2723;--ink-2:#5e5850;--ink-3:#5e5850; --line:#e3d9c9;--line-2:#efe8dc;--line-input:#8f877c; --surface:#fff;--calm:#faf6ef;--krom:#fdfbf7; /* eylem: eski adlar rol token'ına takma ad (KK-006) */ --act:var(--eylem);--act-fg:var(--eylem-yazi);--act-hover:var(--eylem-uzerine);--focus:#8a6536; --mark:#f6ead3;--mark-fg:#6e5228; --btn2-zemin:#fff;--btn2-kenar:#2b2723;--btn2-yazi:#2b2723;--btn2-hover:#faf6ef;--btn2-r:4px; --altin:#8a6536;--altin-k:#74552d;--altin-o:#c9a063;--altin-d:#e8b878;--altin-a:#f6ead3; /* çocuk teması */ --pudra:#f3d9cc;--adacayi:#d6e3cf;--bulut:#d3e2ee; /* yetişkin teması */ --keten:#f4efe6;--tas:#e9e2d6;--kil:#d8cdbc; --yazi-baslik:"Cormorant Garamond",Georgia,serif; /* v2 (eskiden altında; 01.11.2026 kök oldu) */ --zemin-pudra:#f3e8e3;--zemin-tas:#e9e6de; --yazi:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --f-display:33px;--f-h1:28px;--f-h2:23px;--f-lead:19px;--f-body:16px;--f-small:14px;--f-label:12px; --h-link:44px;--h-btn:48px;--h-bar:56px;--h-cubuk:64px;--h-bar-d:80px;--h-tel:44px; --r-btn:4px;--btn-radius:4px;--gut:16px;--olcu:65ch; /* düğme yazısı: tek yer (kit kararı 24.10.2026) */ --f-btn:15px;--f-btn-k:14px; /* durum ve kit yardımcı tonları */ --ink-4:#a39b90;--box:#efe6d6;--box-2:#f6f0e6;--err:#8a2b1f;--err-bg:#fbeeeb;--ok:#2f5a3a;--ok-bg:#edf4ee;--r:0px; /* oda planlayıcı kolonu: koyu gri taş (ham) + rol token'ları (03.11.2026) */ --kolon-tas:#6b6760;--kolon-tas-k:#45413b;--yer-kolon:var(--kolon-tas);--yer-kolon-cizgi:var(--kolon-tas-k);--yer-kolon-yazi:var(--beyaz); --rS:28px;--rN:56px;--rF:96px;--rB:30px; /* ---- ham renkler (01.11.2026 hex temizliği; değerler birebir korunmuştur) ---- */ --beyaz:#fff;--siyah:#000;--ink-orta:#4a4640;--krem:#f6e8c3;--altin-p-h:#d4af72;--hata-yazi:#9b2c1f; --arac-zemin-2:#4a453f;--arac-kenar:#6b655c;--arac-not:#b7ada0; --lila:#ebe6ec;--grad-zemin:#efeaf2;--grad-1:#fdeee8;--grad-2:#f1eaf2;--grad-3:#e4eef9;--grad-4:#e3f3ea;--hale-pudra:#f3d3c4;--hale-bulut:#c6dcee; --gk-zemin:#f4f0ea;--adacayi-d:#e1eadb;--adacayi-ik:#3f5a39;--pudra-a:#f3e3dc;--adacayi-a:#e4ece0;--bulut-a:#e1eaf2;--bulut-serit:#eaf1f7;--svg-zemin:#f6f2ec; /* ürün renk örnekleri (gerçek ürün rengi) */ --renk-bulut:#f5f7f8;--renk-adacayi:#b9cbb0;--renk-pudra:#eac3b3;--renk-ahsap:#d9b98c; /* tema ham renkleri (KK-006, 01.11.2026) */ --ceviz:#4a3b2e;--gok:#4d6f86;--gok-k:#3f5d71;--gok-o:#9db6c8;--zemin-acik:#f6f7f9;--kart-bant-0:rgba(20,26,31,0);--kart-bant-1:rgba(20,26,31,.78);--kart-bant-2:rgba(20,26,31,.88); /* çocuk teması açık gri bant (palet B, 02.11.2026) */ /* açık pasteller (kök pastel + %50 beyaz; çocuk teması bant ritmi, 02.11.2026) */ --pastel-pudra-a:#f9ece6;--pastel-bulut-a:#e9f1f7;--pastel-adacayi-a:#ebf1eb;--pastel-krem-a:#fbf4e1; --greige-taban:#f7f5f1;--greige-keten:#ebe6df;--greige-pudra:#e1dbd2;--greige-isaret:#ece8e1;--greige-cizgi:#dcd7cf; --golge-altin:rgba(138,101,54,.28);--golge-ceviz:rgba(74,59,46,.28);--golge-gok:rgba(77,111,134,.28); /* rol varsayılanı (data-tema yoksa; eski prototipler): nötr eylem */ --eylem:var(--ceviz);--eylem-uzerine:var(--altin-k);--eylem-yazi:var(--beyaz);--eylem-golge:var(--golge-ceviz);--vurgu:var(--altin-k); /* işaret rolü (etiket, süreç no, ilke ikonu, kart no, bağlantı alt çizgisi, çip kenarı): yetiskin/notr altın, cocuk gök */ --isaret:var(--altin);--isaret-acik:var(--altin-o);--cip-kenar:var(--kil); /* ---- anlamsal katman ---- */ /* çizgi deseni (ana sayfa slider'ı + proje hero'su ortak, 07.11.2026) */ --desen-cizgi:url(../gorsel/slider/filigran-sol.png); --zemin-sayfa:var(--surface);--zemin-kart:var(--beyaz);--zemin-koyu:var(--ink);--zemin-bant:var(--keten);--yazi-ters:var(--beyaz);--yazi-orta:var(--ink-orta); color-scheme:light; } /* tablet ve dar dizüstü: kenar boşluğu 16px'te kalmasın (Olcay 07.11, genç odası 1000px'te başlık kenara yapışık) */ @media(min-width:768px){:root{--gut:32px}} @media(min-width:1024px){:root{--f-display:42px;--f-h1:33px;--f-h2:27px;--f-lead:19px;--f-body:17px;--rS:40px;--rN:80px;--rF:128px;--rB:48px;--gut:32px}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--yazi);font-size:var(--f-body);line-height:1.55;padding-bottom:calc(var(--h-cubuk) + env(safe-area-inset-bottom,0px))} @media(min-width:1024px){body{padding-bottom:0}} img{display:block;max-width:100%;height:auto} a{color:inherit} h1,h2,h3,p{margin:0} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} .gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .atla{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--yazi-ters);padding:12px 16px;border-radius:4px;text-decoration:none} .atla:focus{top:8px} .kap{width:100%;max-width:1216px;margin-inline:auto;padding-inline:var(--gut)} .eksik{background:var(--mark);color:var(--mark-fg);font-size:12px;font-weight:600;padding:0 4px;font-family:var(--yazi);font-style:normal;letter-spacing:0;line-height:1.6;display:inline} /* bölüm ritmi: tek yönlü üst boşluk */ .rS{margin-top:var(--rS)}.rN{margin-top:var(--rN)} .rF{margin-top:var(--rF)} /* yazı */ .display{font-family:var(--yazi-baslik);font-weight:400;font-size:var(--f-display);line-height:1.12;letter-spacing:-.01em} .h2{font-size:var(--f-h2);font-weight:600;line-height:1.25;letter-spacing:-.01em} .h3{font-size:var(--f-lead);font-weight:600;line-height:1.3} .lead{font-size:var(--f-body);line-height:1.5;color:var(--ink-2);max-width:var(--olcu)} @media(min-width:1024px){.lead{font-size:var(--f-lead)}} .etiket{display:flex;align-items:center;gap:var(--s3);font-size:var(--f-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--isaret)} /* İMZA: ölçü çizgisi (teknik çizimdeki ölçü oku). "Size göre" = ölçüyle başlar. */ .etiket::before{content:"";width:32px;height:9px;flex:none;background: linear-gradient(var(--isaret-acik),var(--isaret-acik)) 0 50%/100% 1px no-repeat, linear-gradient(var(--isaret-acik),var(--isaret-acik)) 0 0/1px 100% no-repeat, linear-gradient(var(--isaret-acik),var(--isaret-acik)) 100% 0/1px 100% no-repeat} .kucuk{font-size:var(--f-small);color:var(--ink-2)} /* ==== DÜĞMELER (UI kit · C) ==== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--h-btn);padding:0 var(--s5);font:600 var(--f-btn)/1.2 var(--yazi);border:1px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:var(--btn-radius);cursor:pointer;text-decoration:none} .btn:not(.p):not(.metin){background:var(--btn2-zemin);border:1px solid var(--btn2-kenar);color:var(--btn2-yazi);border-radius:var(--btn-radius);font-weight:500} .btn.p{background:var(--eylem);border-color:var(--eylem);color:var(--eylem-yazi)} .btn.metin{border-color:transparent;padding-inline:0;min-height:var(--h-link);background:none} .btn.p:focus-visible{outline:none;box-shadow:0 0 0 2px var(--beyaz),0 0 0 4px var(--ink)} .lnk{display:inline-flex;align-items:center;gap:6px;min-height:var(--h-link);font-weight:600;color:var(--ink);text-decoration:none} /* ==== ÜST: telefon şeridi + yapışkan bar ==== */ .telserit{min-height:var(--h-tel);display:flex;align-items:center;justify-content:center;gap:var(--s4);font-size:var(--f-small);background:var(--calm);border-bottom:1px solid var(--line-2)} .telserit a,.telserit .pasif{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600} .telserit .ms{display:none} .telserit .pin{vertical-align:-2px;margin-right:4px;color:var(--altin)} .tel-sol{display:flex;align-items:center;gap:var(--s4)} .ust-link{display:none} .ust-bar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line-2)} .ust-ic{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--h-bar);padding-inline:4px} .ikon{width:44px;height:44px;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:4px;text-decoration:none} .ikon svg{width:22px;height:22px} .ust-bar .sag{display:flex;justify-content:flex-end} .logo{display:block;line-height:0;flex-shrink:0} /* dolu menüde logo daralmasın (04.11) */ .logo img{height:30px;width:auto} .menu-d{display:none} @media(min-width:1024px){ .telserit .ms{display:inline}.telserit .mm{display:none} .telserit{justify-content:space-between;padding-inline:max(var(--gut),calc((100vw - 1216px)/2))} .ust-link{display:flex;gap:var(--s5)} .ust-link a,.ust-link .pasif{position:relative;font-weight:500;font-size:13px;color:var(--ink-2)} .ust-link a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--altin);transform:scaleX(0);transform-origin:left;transition:transform var(--gecis) ease} @media(hover:hover){.ust-link a:is(:hover,:focus-visible){color:var(--ink)}} .ust-ic{display:flex;gap:var(--s6);min-height:var(--h-bar-d);padding-inline:var(--gut);max-width:1280px;margin-inline:auto} .ust-ic>.sol{display:none} .logo img{height:40px} .menu-d{display:flex;flex:1;gap:var(--s5);justify-content:center} .menu-d a,.menu-d .pasif{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap} } @media(min-width:1024px) and (max-width:1200px){.menu-d{gap:var(--s4)}.menu-d a,.menu-d .pasif{font-size:14px}} .randevu-btn{display:none} .btn.k{min-height:44px;padding:0 var(--s4);font-size:var(--f-btn-k)} @media(min-width:1024px){.randevu-btn{font-size:var(--f-btn-k);min-height:44px;padding-inline:var(--s4);display:inline-flex;margin-right:var(--s3);white-space:nowrap}} /* ==== MEGA MENÜ (veriyle çizilir) + MOBİL ÇEKMECE ==== */ .menu-d .mg-tetik{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap} .mg-tetik svg{width:14px;height:14px;transition:transform .25s ease} .mg-tetik[aria-expanded="true"] svg{transform:rotate(180deg)} .menu-d>a,.menu-d>.mg-tetik{position:relative} .menu-d>.bslk,.ust-link>.bslk{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;cursor:default} .menu-d>a::after,.menu-d>.mg-tetik::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--altin);transform:scaleX(0);transform-origin:left;transition:transform var(--gecis) ease} .menu-d>.mg-tetik[aria-expanded="true"]::after{transform:scaleX(1)} /* üst menü çizgisi: tek kural (.ust-link + .menu-d), fare ve klavye aynı */ @media(hover:hover){.ust-link a:is(:hover,:focus-visible)::after,.menu-d>a:is(:hover,:focus-visible)::after,.menu-d>.mg-tetik:is(:hover,:focus-visible)::after{transform:scaleX(1)}} .menu-d a.vurgu,.menu-d .pasif.vurgu{color:var(--altin);display:inline-flex;align-items:center;gap:8px} .menu-d a.vurgu::before,.menu-d .pasif.vurgu::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--altin-o)} .mega{display:none}.mega-scrim{display:none} /* .pasif (06.11.2026): hedefsiz bağlantı (tip "baslik", yaprak/üst düzey) — bağlantıyla aynı görünüm, tıklanamaz; kolon başlığı .bslk ayrı */ .pasif{cursor:default} .mega-bant{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4);background:var(--calm);border-left:3px solid var(--altin);text-decoration:none;color:var(--ink);min-height:64px;transition:background-color .2s ease} .mega-bant b{display:block;font-size:var(--f-body)}.mega-bant small{display:block;color:var(--ink-2);font-size:var(--f-small)} .mega-bant svg{width:20px;height:20px;color:var(--altin);flex:none;transition:transform .25s ease} @media(hover:hover){.mega-bant:is(:hover,:focus-visible){background:var(--keten)}.mega-bant:is(:hover,:focus-visible) svg{transform:translateX(var(--ok-kayma))}} @media(min-width:1024px){ .mega{display:block;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 20px 44px rgba(43,39,35,.14);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s} .mega.acik{visibility:visible;opacity:1;transform:none;transition-delay:0s} .mega-scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(43,39,35,.28);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s} .mega-scrim.acik{opacity:1;visibility:visible;transition-delay:0s} .mega-ic{max-width:1280px;margin-inline:auto;padding:var(--s6) var(--gut) var(--s6);display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s8);align-items:start} .mega-sol{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);min-width:0} .mega-kol{display:grid;grid-template-columns:repeat(var(--kol,4),minmax(0,1fr));gap:var(--s6)} .mega-kol[data-kol="1"]{--kol:1}.mega-kol[data-kol="2"]{--kol:2}.mega-kol[data-kol="3"]{--kol:3}.mega-kol[data-kol="4"]{--kol:4}.mega-kol[data-kol="5"]{--kol:5}.mega-kol[data-kol="6"]{--kol:6} .mega h3{margin:0 0 var(--s2);font-family:var(--yazi);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700} .mega h3 a{display:inline-block;padding-block:8px;line-height:1.5;color:var(--altin);text-decoration:none;--alt-iz:transparent;--alt-renk:var(--altin);--alt-konum:calc(100% - 8px)} /* çizgi: ortak .alt kalıbı */ .mega h3 a span{display:inline-block;margin-left:6px;transition:transform var(--gecis-hizli) ease} .mega h4{margin:var(--s3) 0 0;font-size:12px;font-weight:700} .mega h4 a{display:inline-block;padding-block:6px;color:var(--ink);text-decoration:none} .mega ul{list-style:none;margin:0;padding:0} .mega li a,.mega li .pasif{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:14px;text-decoration:none;transition:color var(--gecis-hizli) ease} .mega h4 a{transition:color var(--gecis-hizli) ease} @media(hover:hover){.mega li a:is(:hover,:focus-visible),.mega h4 a:is(:hover,:focus-visible){color:var(--altin)}.mega h3 a:is(:hover,:focus-visible) span{transform:translateX(var(--ok-kayma))}} .mega-yan{display:block} .mega h3 .bslk{display:inline-block;padding-block:8px;line-height:1.5;color:var(--altin)} .mega-kart{position:relative;display:block;aspect-ratio:1/1;width:100%;overflow:hidden;text-decoration:none;color:var(--yazi-ters)} .mega-kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--box);transition:transform var(--gecis) ease} .mega-kart::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(31,28,25,.78) 0%,rgba(31,28,25,.25) 45%,rgba(31,28,25,0) 70%)} .mega-kart .kust{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:1} .mega-kart .et{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.92} .mega-kart b{display:block;margin-top:var(--s1);font-size:18px;font-weight:600;line-height:1.25} @media(hover:hover){.mega-kart:is(:hover,:focus-visible) img{transform:scale(var(--hover-olcek))}} @media(pointer:fine){.mega li a,.mega li .pasif{min-height:28px}} .mega li .bslk{display:flex;align-items:center;min-height:28px;padding-top:var(--s2);color:var(--altin);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700} } .cekmece{position:fixed;inset:0;z-index:60;background:var(--surface);display:flex;flex-direction:column;transform:translateX(-100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s} .cekmece.acik{transform:none;visibility:visible;transition-delay:0s} @media(min-width:1024px){.cekmece{display:none}} .cek-ust{display:flex;align-items:center;justify-content:space-between;min-height:var(--h-bar);padding:0 4px 0 var(--gut);border-bottom:1px solid var(--line-2)} .cek-ust .logo img{height:28px} .cek-govde{position:relative;flex:1;overflow:hidden} .pane{position:absolute;inset:0;overflow-y:auto;padding:var(--s3) var(--gut) var(--s7);background:var(--surface);transition:transform .3s ease,visibility 0s linear .3s} .pane-sub{transform:translateX(100%);visibility:hidden} .pane-sub.on{transform:none;visibility:visible;transition-delay:0s} .pane-1.arka{transform:translateX(-30%);visibility:hidden} .mrow{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0;border:0;border-bottom:1px solid var(--line-2);background:none;color:var(--ink);font:inherit;font-size:var(--f-lead);font-weight:500;text-decoration:none;text-align:left;cursor:pointer} .mrow.vurgu{color:var(--altin);font-weight:600} .mrow.pasif{cursor:default} .mrow svg{width:20px;height:20px;color:var(--altin);transition:transform var(--gecis-hizli) ease} .cek-kucuk{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid} .cek-kucuk a,.cek-kucuk .pasif{display:flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;font-size:var(--f-small)} .geri{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0;border:0;background:none;color:var(--altin);font:inherit;font-weight:600;cursor:pointer} .geri svg{width:20px;height:20px} .pane-bas{margin:var(--s2) 0 var(--s4);font-family:var(--yazi);font-size:var(--f-h2);font-weight:600} .pane .grup{margin-bottom:var(--s5)} .pane .grup h3{margin:0} .pane .grup h3 .bslk{display:flex;align-items:center;min-height:52px;color:var(--altin);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line)} .pane .grup h3 a{display:flex;align-items:center;justify-content:space-between;min-height:52px;color:var(--altin);text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line)} .pane .grup h3 a svg{width:18px;height:18px} .pane .grup h4{margin:var(--s3) 0 0;font-size:13px;font-weight:700} .pane .grup h4 a{display:flex;min-height:44px;align-items:center;color:var(--ink);text-decoration:none} .pane .grup ul{list-style:none;margin:0;padding:0} .pane .grup li a,.pane .grup li .pasif{display:flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .pane .mega-bant{margin-top:var(--s3)} .pane .grup li .bslk,.pane .alt-l .bslk{display:flex;align-items:center;min-height:48px;color:var(--altin);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line-2)} .mrow.bslk{cursor:default;color:var(--altin);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700} .pane .alt-l{display:grid;margin-top:var(--s3)} .pane .alt-l a,.pane .alt-l .pasif{display:flex;align-items:center;justify-content:space-between;min-height:52px;color:var(--ink);font-weight:700;text-decoration:none;border-top:1px solid var(--line)} .pane .alt-l a svg,.pane .alt-l .pasif svg{width:18px;height:18px;color:var(--altin);transition:transform var(--gecis-hizli) ease} /* çekmece satırları: kitteki bağlantı davranışı (ok kayar), klavyede aynı */ @media(hover:hover){.mrow:is(:hover,:focus-visible) svg,.pane .alt-l a:is(:hover,:focus-visible) svg,.pane .grup h3 a:is(:hover,:focus-visible) svg{transform:translateX(var(--ok-kayma))}} .cek-alt{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));border-top:1px solid var(--line-2)} html.kilit{overflow:hidden} .cek-alt .tam{grid-column:1/-1} @media (prefers-reduced-motion:reduce){.mega,.cekmece,.pane,.mega-scrim{transition:none!important}} /* ==== İNCELEME ÇUBUĞU (sayfanın parçası değil) ==== */ /* ==== TASARIM ARACI (sunum paneli; sitenin parçası değil) ==== */ .arac{position:fixed;left:16px;bottom:16px;z-index:55;font:14px/1.4 var(--yazi)} @media(max-width:1023px){.arac{bottom:calc(var(--h-cubuk) + 16px + env(safe-area-inset-bottom))}} .arac.gizli{display:none} .arac-ac{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;background:var(--ink);color:var(--yazi-ters);border:0;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.28);cursor:pointer;font:inherit;font-weight:600} .arac-ac svg{width:18px;height:18px} .arac-panel{display:none;position:absolute;left:0;bottom:56px;width:min(344px,calc(100vw - 32px));max-height:min(72vh,600px);overflow:auto;background:var(--ink);color:var(--yazi-ters);border-radius:14px;padding:18px 18px 8px;box-shadow:0 18px 48px rgba(0,0,0,.35)} .arac.acik .arac-panel{display:block} .arac h2{margin:0 0 14px;font:600 15px var(--yazi);color:var(--yazi-ters)} .arac fieldset{border:0;margin:0 0 16px;padding:0} .arac legend{padding:0;margin-bottom:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--altin-d);font-weight:700} .arac .sec-g{display:flex;flex-wrap:wrap;gap:8px} .arac button.sec{min-height:44px;padding:0 14px;border:1px solid var(--arac-kenar);background:transparent;color:var(--yazi-ters);border-radius:8px;font:inherit;cursor:pointer;transition:background-color .15s ease,color .15s ease} .arac button.sec[aria-pressed="true"]{background:var(--zemin-kart);color:var(--ink);border-color:var(--beyaz);font-weight:600} @media(hover:hover){.arac button.sec:is(:hover,:focus-visible){border-color:var(--beyaz)}} .arac .alt-s{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0 14px;border-top:1px solid var(--arac-zemin-2)} .arac .alt-s button{min-height:44px;padding:0 14px;border:0;background:var(--arac-zemin-2);color:var(--yazi-ters);border-radius:8px;font:inherit;cursor:pointer} .arac .not{margin:0 0 12px;color:var(--arac-not);font-size:12px} .arac :focus-visible{outline:2px solid var(--altin-d);outline-offset:2px} @media print{.arac{display:none}} /* ==== HERO SLAYT ==== */ .hero{position:relative} .serit{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .serit::-webkit-scrollbar{display:none} .slayt{flex:0 0 100%;scroll-snap-align:start;position:relative} .slayt .foto{aspect-ratio:4/3;overflow:hidden;background:var(--calm)} .slayt .foto img{width:100%;height:100%;object-fit:cover} .slayt .kart{padding:var(--s3) var(--gut) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)} .slayt .kart .lead{margin-bottom:var(--s2)} .slayt .kart .display{max-width:16ch} .kontrol{position:absolute;right:var(--gut);display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.94);border-radius:4px;padding:2px;top:calc((100vw * .75) - 56px)} .kontrol .ikon svg{width:20px;height:20px} /* hero durdur/başlat (WCAG 2.2.2) · aria-pressed="true" = durmuş, oynat simgesi */ .kontrol .dur-ac .i-oyn{display:none}.kontrol .dur-ac[aria-pressed="true"] .i-dur{display:none}.kontrol .dur-ac[aria-pressed="true"] .i-oyn{display:block} .sayac{font-size:var(--f-small);font-weight:600;min-width:44px;text-align:center;font-variant-numeric:tabular-nums} .noktalar{display:flex;gap:0;padding:0 4px} .nokta{width:24px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0} .nokta::after{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);transition:width .25s ease} .nokta[aria-current="true"]::after{background:var(--ink);width:18px;border-radius:4px} @media(min-width:1024px){ .hero{max-width:1280px;margin-inline:auto;padding-inline:var(--gut)} .slayt .foto{aspect-ratio:auto;height:600px;border-radius:2px} .slayt .kart{position:absolute;left:var(--s7);bottom:var(--s7);max-width:520px;background:var(--surface);padding:var(--s6) var(--s6) var(--s5);gap:var(--s3);box-shadow:0 1px 0 var(--line)} .slayt[data-i="1"] .kart{background:var(--calm)} .kontrol{top:auto;bottom:var(--s7);right:calc(var(--gut) + var(--s7))} } /* ==== GİRİŞ A: iki kutu ==== */ .giris-a{display:grid;gap:var(--s4)} .kutu{display:flex;flex-direction:column;border-radius:2px;overflow:hidden} .kutu.cocuk{background:var(--pudra)} .kutu.yetiskin{background:var(--tas)} .kutu .foto{aspect-ratio:3/2;overflow:hidden} .kutu .foto img{width:100%;height:100%;object-fit:cover} .kutu .ic{padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;flex:1} .kutu .ic p{max-width:var(--olcu)} .cipler{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)} .cip{display:inline-flex;align-items:center;min-height:var(--h-link);padding:0 var(--s4);border:1px solid rgba(43,39,35,.28);background:rgba(255,255,255,.7);border-radius:999px;font-size:var(--f-small);font-weight:600;text-decoration:none;transition:background-color .2s ease,border-color .2s ease} @media(hover:hover){.cip:is(:hover,:focus-visible){background:var(--zemin-kart);border-color:var(--ink)}} @media(min-width:768px){.giris-a{grid-template-columns:1fr 1fr;gap:var(--s5)}.kutu .ic{padding:var(--s6)}} /* ==== GİRİŞ B: sıralı satırlar ==== */ .giris-b{display:none;gap:var(--s7)} html[data-giris="b"] .giris-a{display:none} html[data-giris="b"] .giris-b{display:grid} .giris-satir{display:grid;gap:var(--s4);align-items:center} .giris-satir .foto{aspect-ratio:4/3;overflow:hidden;border-radius:2px} .giris-satir .foto img{width:100%;height:100%;object-fit:cover} .giris-satir .ic{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start} .giris-satir.cocuk .foto{background:var(--pudra);padding:var(--s4)} .giris-satir.yetiskin .foto{background:var(--tas);padding:var(--s4)} @media(min-width:768px){ .giris-satir{grid-template-columns:7fr 5fr;gap:var(--s8)} .giris-satir.yetiskin{grid-template-columns:5fr 7fr} .giris-satir.yetiskin .ic{order:-1} .giris-b{gap:var(--s9)} } /* ==== GÜVEN BANDI ==== */ .guven{display:grid;gap:var(--s3);padding-block:var(--s2);border:0} .gk{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s5);background:var(--gk-bg,var(--gk-zemin));color:var(--ink);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,background-color .35s ease} .gik{width:56px;height:56px;color:var(--gk-ik,var(--altin));stroke-width:1.15} .gm b{display:block;font-size:var(--f-lead);font-weight:500;line-height:1.25;letter-spacing:.005em} .gm span{display:block;margin-top:var(--s2);font-size:var(--f-small);color:var(--ink-2);line-height:1.5} .gok{position:absolute;top:var(--s5);right:var(--s5);width:38px;color:var(--gk-ik,var(--altin));opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .35s ease} .gok svg{width:100%;height:auto;display:block} @media(hover:hover){.gk:hover,.gk:focus-visible{transform:scale(1.035);box-shadow:0 18px 38px rgba(43,39,35,.14);z-index:2}.gk:hover .gok,.gk:focus-visible .gok{opacity:1;transform:none}} @media(hover:none){.gok{opacity:1;transform:none;width:30px;top:var(--s4);right:var(--s4)}} .guven li{position:relative} ul.yalin{list-style:none;margin:0;padding:0} @media(min-width:768px){.guven{grid-template-columns:repeat(2,1fr);gap:var(--s4)}.guven li:last-child:nth-child(odd){grid-column:1/-1}} @media(min-width:1024px){.guven{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s5)}.guven li:last-child:nth-child(odd){grid-column:auto}.gk{grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) var(--s5) var(--s6);min-height:260px;align-content:start}} /* ==== SAĞLIK BANDI (sakin yüzey) ==== */ .saglik{background:var(--calm)} .saglik .kap{padding-block:var(--s8);display:grid;gap:var(--s5)} .saglik blockquote{margin:0;font-family:var(--yazi-baslik);font-size:var(--f-h2);line-height:1.4;max-width:34ch} .saglik blockquote p::before{content:"“";color:var(--altin-o)} .saglik blockquote p::after{content:"”";color:var(--altin-o)} .saglik cite{font-style:normal;font-size:var(--f-small);color:var(--ink-2)} .saglik .maddeler{font-size:var(--f-small);color:var(--ink-2)} @media(min-width:1024px){.saglik .kap{padding-block:var(--s9);grid-template-columns:4fr 7fr;column-gap:var(--s8)}.saglik .sag{display:grid;gap:var(--s4)}} /* ana sayfa ilke bölümü: büyük mesaj + kısa alıntı + kanıt listesi */ .saglik-ilke .saglik-sol{display:grid;gap:var(--s4);align-content:start;justify-items:start} .saglik-ilke .h2{font-size:var(--f-h1);line-height:1.2} .saglik-ilke blockquote{font-size:var(--f-lead);max-width:36ch} .saglik-ilke .lnk{margin-top:var(--s2)} .saglik-ilke .onay-liste{grid-template-columns:1fr;gap:var(--s4)} .saglik-ilke .onay-liste li{font-size:var(--f-lead)} @media(min-width:1024px){.saglik-ilke .kap{grid-template-columns:6fr 5fr;align-items:center}} /* ==== TESLİM GALERİSİ ==== */ .bolum-bas{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)} .galeri{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .galeri figure{margin:0} .galeri .foto{aspect-ratio:3/4;overflow:hidden;background:var(--calm)} .galeri .foto img{width:100%;height:100%;object-fit:cover} .galeri figcaption{font-size:var(--f-label);color:var(--ink-2);padding-top:var(--s2);line-height:1.5} .galeri.imli figcaption{font-size:var(--f-small);font-weight:600;color:var(--ink);padding-top:var(--s3);line-height:1.4;display:flex;align-items:center;gap:var(--s2)} .galeri.imli figcaption::before{content:"";flex:none;width:16px;height:1px;background:var(--altin-o)} .not{font-size:var(--f-small);color:var(--ink-2);margin-top:var(--s4)} .not.cizgili{font-size:var(--f-label);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-2)} @media(min-width:1024px){.galeri{grid-template-columns:repeat(4,1fr);gap:var(--s5)}} /* ==== ATÖLYE ==== */ .atolye{display:grid;gap:var(--s5);align-items:center} .atolye .foto{aspect-ratio:16/9;overflow:hidden;background:var(--keten);position:relative} .atolye .foto img{width:100%;height:100%;object-fit:cover} .atolye .foto .eksik{position:absolute;left:8px;top:8px} .atolye .ic{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start} .sayilar{display:flex;gap:var(--s6);margin-top:var(--s2)} .sayilar b{display:block;font-family:var(--yazi-baslik);font-weight:400;font-size:var(--f-h1);line-height:1;color:var(--ink)} .sayilar span{font-size:var(--f-small);color:var(--ink-2)} @media(min-width:1024px){.atolye{grid-template-columns:6fr 5fr;gap:var(--s8)}} /* ==== YORUMLAR ==== */ .yorum-duzen{display:grid;gap:var(--s6)} .yorum-ozet{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)} .yorum-ozet .h2{margin:0} .yorum-puan{display:flex;align-items:center;gap:var(--s3);margin:0} .yorum-puan b{font-size:var(--f-display);line-height:1;font-weight:700} .yildiz{display:inline-flex;gap:2px;color:var(--vurgu)} .yildiz svg{width:18px;height:18px} .yorum-say{margin:0;font-weight:700} .yorumlar{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none} .yorumlar::-webkit-scrollbar{display:none} .yorumlar figure{flex:0 0 82%;scroll-snap-align:start;margin:0;padding:var(--s5);border-radius:var(--r-kart,2px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);background:var(--zemin-kart);border:1px solid var(--line)} /* rev2 (02.11.2026): yorum kartı nötr beyaz + ince çizgi; eski renk sınıfları (pudra/bulut/adacayi) etkisiz */ .yorumlar blockquote{margin:0;font-size:var(--f-lead);line-height:1.45} .yorumlar figure.pudra{background:var(--pudra-a)}.yorumlar figure.bulut{background:var(--bulut-a)}.yorumlar figure.adacayi{background:var(--adacayi-a)}.yorumlar figure.krem{background:var(--krom)} /* yorum kartı pastelleri (Olcay 02.11: renkli hali daha güzel) */ html:is([data-tema="yetiskin"],[data-tema="koyu"]) .yorumlar figure:is(.pudra,.bulut,.adacayi,.krem){background:var(--zemin-pudra)} /* yetişkin tema: pasteller yerine greige (KK-010) */ .yorumlar figcaption{font-size:var(--f-small);color:var(--ink-2)} .yorumlar figcaption b{color:var(--ink)} @media(min-width:1024px){ .yorum-duzen{grid-template-columns:4fr 8fr;gap:var(--s8);align-items:start} .yorumlar{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin-inline:0;padding-inline:0} .yorumlar figure{flex:none} .yorumlar figure:first-child{grid-column:1/-1} .yorumlar figure:first-child blockquote{font-size:var(--f-h2)} .yorumlar blockquote{font-size:var(--f-body)} } /* ==== PROJELER TEASER ==== */ .projeler{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;padding:var(--s6) var(--s4);background:var(--keten);border-left:3px solid var(--altin-o)} @media(min-width:1024px){.projeler{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s7);padding:var(--s7) var(--s7)}.projeler .ic{display:grid;gap:var(--s2)}} /* ==== ALT BİLGİ ==== */ .alt-bilgi{background:var(--calm);border-top:1px solid var(--line)} .alt-bilgi .kap{padding-block:var(--s7) var(--s6);display:grid;gap:var(--s6)} .alt-bilgi h2{font-size:var(--f-small);font-weight:700;margin-bottom:var(--s2)} .alt-bilgi ul a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--f-small);text-decoration:none} .alt-bilgi address{font-style:normal;font-size:var(--f-small);color:var(--ink-2);display:grid;gap:var(--s1)} .alt-bilgi address a{font-size:var(--f-body);font-weight:700;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .alt-bilgi ul a,.alt-bilgi address a{--alt-iz:transparent;--alt-konum:calc(100% - 11px)} /* footer: kitteki bağlantı çizgisi (ortak .alt kalıbı) */ .alt-logo{height:36px;width:auto;margin-bottom:16px} .telif{font-size:var(--f-label);color:var(--ink-2);border-top:1px solid var(--line);padding-top:var(--s4)} @media(min-width:768px){.alt-bilgi .kap{grid-template-columns:2fr 1fr 1fr 1fr}.telif{grid-column:1/-1}} /* ==== ALT ÇUBUK (tek sabit katman) ==== */ .altcubuk{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:var(--s2);padding:var(--s2) var(--s3);padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));min-height:var(--h-cubuk);border-top:1px solid var(--line);background:var(--surface)} .altcubuk .btn{padding:0;font-size:var(--f-btn-k);gap:6px} .altcubuk .btn svg{width:18px;height:18px} @media(min-width:1024px){.altcubuk{display:none}} /* ==== HAREKET DİLİ (UI kit bloğu, aynen) ==== */ .btn{transition:transform var(--gecis-hizli) ease,box-shadow var(--gecis-hizli) ease,background-color var(--gecis-hizli) ease} .btn:not(.p):not(.metin){background-image:linear-gradient(var(--btn2-kenar),var(--btn2-kenar));background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;transition:background-size var(--gecis) ease,color var(--gecis) ease,transform var(--gecis-hizli) ease} .btn .ok,.lnk .ok{display:inline-block;transition:transform var(--gecis-hizli) ease} .alt{padding-bottom:5px} /* çizgi: aşağıdaki ortak kalıp */ .btn.metin,.lnk.u{text-decoration:none} .btn.metin{color:var(--ink)} @media (hover:hover){ /* birincil: tek kural (renk + kalkış); klavyede halka korunur, gölge yalnız farede. [disabled]/.pasif hariç */ .btn.p:not([disabled]):not(.pasif):is(:hover,:focus-visible){background:var(--eylem-uzerine);border-color:var(--eylem-uzerine);transform:translateY(-1px)} .btn.p:not([disabled]):not(.pasif):not(:focus-visible):hover{box-shadow:0 6px 14px var(--eylem-golge)} .btn:not(.p):not(.metin):not([disabled]):not(.pasif):is(:hover,:focus-visible){background-size:100% 100%;color:var(--yazi-ters)} .btn.metin:not([disabled]):not(.pasif):is(:hover,:focus-visible) .ok,.lnk:is(:hover,:focus-visible) .ok{transform:translateX(var(--ok-kayma))} } /* ==== SOLDAN SAĞA ALT ÇİZGİ · tek kalıp ==== Taşıyıcılar: .alt (span) ve sınıf eklenemeyen bağlantılar (mega başlık, .c5, kart bandı başlığı, kategori ürün adı, footer). Değişkenler: --alt-iz (kalıcı katman; şeffaf = yok), --alt-renk (büyüyen çizgi), --alt-kalin, --alt-konum (dikey konum). */ .alt,.mega h3 a,.c5,.pj-kart-bant h3 a,.kat-ur h3,.alt-bilgi ul a,.alt-bilgi address a{background-image:linear-gradient(var(--alt-iz,var(--isaret)),var(--alt-iz,var(--isaret))),linear-gradient(var(--alt-renk,var(--ink)),var(--alt-renk,var(--ink)));background-repeat:no-repeat;background-position:0 var(--alt-konum,100%),0 var(--alt-konum,100%);background-size:100% var(--alt-kalin,var(--cizgi-kalinlik)),0% var(--alt-kalin,var(--cizgi-kalinlik));transition:background-size var(--gecis) ease} @media(hover:hover){ .btn.metin:is(:hover,:focus-visible) .alt,.lnk.u:is(:hover,:focus-visible) .alt,.kat-tk:is(:hover,:focus-visible) .alt,.pj-diger-c a:is(:hover,:focus-visible) .alt, .mega h3 a:is(:hover,:focus-visible),.c5:is(:hover,:focus-visible),.pj-kart-bant h3 a:is(:hover,:focus-visible),.kat-ur a:is(:hover,:focus-visible) h3, .alt-bilgi ul a:is(:hover,:focus-visible),.alt-bilgi address a:is(:hover,:focus-visible){background-size:100% var(--alt-kalin,var(--cizgi-kalinlik)),100% var(--alt-kalin,var(--cizgi-kalinlik))} } .btn:not([disabled]):not(.pasif):active,.c1:active,.c2:active,.c7 a:active{transform:translateY(1px) scale(.99);box-shadow:none} /* Altın tonu alternatifi: parlak altın + antrasit yazı */ html[data-altin="p"]{--altin:var(--altin-o)} html[data-altin="p"] .etiket{color:var(--altin-k)} /* metin rengi 4,5:1 için koyu kalır */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* ==== HERO B: tam görsel, yazı üstte (konsept hero'su) ==== */ .dugmeler{display:flex;flex-wrap:wrap;gap:var(--s3)} .b-ikinci{display:none} html[data-hero="b"] .b-ikinci{display:inline-flex} html[data-hero="b"] .hero{max-width:none;padding-inline:0} html[data-hero="b"] .slayt{min-height:560px;display:flex;align-items:flex-end;color:var(--yazi-ters)} html[data-hero="b"] .slayt .foto{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0} html[data-hero="b"] .slayt::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(31,28,25,.92) 0%,rgba(31,28,25,.74) 48%,rgba(31,28,25,.34) 82%,rgba(31,28,25,.18) 100%)} html[data-hero="b"] .slayt .kart{position:relative;z-index:2;left:auto;bottom:auto;max-width:none;background:transparent;box-shadow:none;padding:var(--s9) var(--gut) 88px;color:var(--yazi-ters);transform:none} html[data-hero="b"] .slayt[data-i="1"] .kart{background:transparent} html[data-hero="b"] .slayt .kart .etiket,html[data-hero="b"] .slayt .kart .display,html[data-hero="b"] .slayt .kart .lead{color:var(--yazi-ters)} html[data-hero="b"] .slayt .kart .etiket::before{background:var(--altin-d)} html[data-hero="b"] .slayt .kart .lead{opacity:.95} html[data-hero="b"] .btn.b-ikinci,html[data-hero="b"] .slayt .kart .btn:not(.p){background:transparent;color:var(--yazi-ters);border-color:rgba(255,255,255,.8)} @media(hover:hover){html[data-hero="b"] .slayt .kart .btn:not(.p):is(:hover,:focus-visible){background:var(--zemin-kart);color:var(--ink)}} html[data-hero="b"] .kontrol{top:auto;bottom:var(--s4);right:var(--gut);z-index:3} html[data-hero="b"] .kontrol{background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 20px rgba(0,0,0,.14);border-radius:999px;padding:2px var(--s2)} @media(min-width:1024px){ html[data-hero="b"] .slayt{min-height:640px;align-items:center} html[data-hero="b"] .slayt::after{background:linear-gradient(90deg,rgba(31,28,25,.86) 0%,rgba(31,28,25,.76) 34%,rgba(31,28,25,.5) 56%,rgba(31,28,25,.06) 82%)} html[data-hero="b"] .slayt .kart{padding:var(--s9) max(var(--gut),calc((100vw - 1216px)/2));max-width:calc(560px + 2*max(var(--gut),calc((100vw - 1216px)/2)))} html[data-hero="b"] .kontrol{bottom:var(--s6);right:max(var(--gut),calc((100vw - 1216px)/2))} } /* ==== GİRİŞ C: görsel + metin bantları (ikincisi ters), görsel 9:8 ==== */ .giris-c{display:none} html[data-giris="c"] .giris-a{display:none} html[data-giris="c"] .giris-c{display:grid;gap:var(--s6)} html[data-giris="c"] #giris{max-width:none;padding-inline:0} .bant{display:grid} .bant.cocuk{background:var(--bulut)} .bant.yetiskin{background:var(--tas)} .bant .etiket{color:var(--mark-fg)} .bant.cocuk .b-lead{color:var(--yazi-orta)} .bant .b-foto{aspect-ratio:4/3;overflow:hidden} .bant .b-foto img{width:100%;height:100%;object-fit:cover;display:block} .bant .b-ic{padding:var(--s7) var(--gut);display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;justify-content:center} .bant .b-lead{margin:0;color:var(--ink-2);max-width:var(--olcu)} .bant .h2{margin:0;max-width:20ch} @media(min-width:1024px){ html[data-giris="c"] .giris-c{gap:var(--s8)} .bant{grid-template-columns:9fr 8fr;min-height:560px} .bant.ters{grid-template-columns:8fr 9fr} .bant .b-foto{aspect-ratio:auto;height:100%;position:relative} .bant .b-foto img{position:absolute;inset:0} .bant .b-ic{padding:var(--s8) 15.5%} .bant.ters .b-foto{order:2} .bant.ters .b-ic{order:1} .bant .h2{max-width:14ch} } /* Canlı degrade: yalnız pudra ve bulut; iki renk alanı farklı yollarda dolaşır, hangi rengin nerede olduğu sürekli değişir. Hareket azaltma tercihinde ve bant görünmezken durur. */ .bant.gradyan{background:var(--lila)} .bant.gradyan .b-ic{position:relative;isolation:isolate;overflow:hidden;background:var(--lila)} .bant.gradyan .b-ic::before,.bant.gradyan .b-ic::after{content:"";position:absolute;z-index:-1;width:150%;aspect-ratio:1;left:-25%;top:50%;margin-top:-75%;border-radius:50%;will-change:transform} .bant.gradyan .b-ic::before{background:radial-gradient(closest-side,var(--hale-pudra) 0%,rgba(243,211,196,.85) 40%,rgba(243,211,196,0) 100%);animation:pudra-yol 27s ease-in-out infinite;animation-duration:calc(27s*var(--hiz,1))} .bant.gradyan .b-ic::after{background:radial-gradient(closest-side,var(--hale-bulut) 0%,rgba(198,220,238,.85) 40%,rgba(198,220,238,0) 100%);animation:bulut-yol 34s ease-in-out infinite;animation-duration:calc(34s*var(--hiz,1))} .bant.gradyan.durdur .b-ic::before,.bant.gradyan.durdur .b-ic::after{animation-play-state:paused} html[data-hiz="yavas"]{--hiz:1.8}html[data-hiz="hizli"]{--hiz:.45} html[data-hiz="kapali"] .bant.gradyan .b-ic::before,html[data-hiz="kapali"] .bant.gradyan .b-ic::after{animation:none} @keyframes pudra-yol{0%{transform:translate(-32%,-26%)}25%{transform:translate(30%,-12%)}50%{transform:translate(22%,32%)}75%{transform:translate(-28%,24%)}100%{transform:translate(-32%,-26%)}} @keyframes bulut-yol{0%{transform:translate(30%,28%)}25%{transform:translate(-26%,24%)}50%{transform:translate(-30%,-30%)}75%{transform:translate(26%,-22%)}100%{transform:translate(30%,28%)}} /* Kart renk alternatifleri */ html[data-kart="b"] .guven li:nth-child(1) .gk{--gk-bg:var(--pudra)} html[data-kart="b"] .guven li:nth-child(2) .gk{--gk-bg:var(--bulut)} html[data-kart="b"] .guven li:nth-child(3) .gk{--gk-bg:var(--adacayi)} html[data-kart="b"] .guven li:nth-child(4) .gk{--gk-bg:var(--krem)} html[data-kart="b"] .gk,html[data-kart="d"] .gk,html[data-kart="c"] .gk{--gk-ik:var(--ink)} html[data-kart="b"] .gm span{color:var(--yazi-orta)} html[data-kart="c"] .gk{--gk-bg:var(--zemin-kart);box-shadow:inset 0 0 0 1px var(--line)} html[data-kart="d"] .gk{--gk-bg:var(--adacayi-d);--gk-ik:var(--adacayi-ik)} html[data-kart="d"] .gm span{color:var(--yazi-orta)} @media(hover:hover){ html[data-kart="c"] .guven li:nth-child(1) a.gk:is(:hover,:focus-visible){--gk-bg:var(--pudra)} html[data-kart="c"] .guven li:nth-child(2) a.gk:is(:hover,:focus-visible){--gk-bg:var(--bulut)} html[data-kart="c"] .guven li:nth-child(3) a.gk:is(:hover,:focus-visible){--gk-bg:var(--adacayi)} html[data-kart="c"] .guven li:nth-child(4) a.gk:is(:hover,:focus-visible){--gk-bg:var(--krem)} html[data-kart="b"] a.gk:is(:hover,:focus-visible){filter:saturate(1.08)} } /* Zemin stili "meta": pudra, lavanta, bulut ve adaçayı birbirine yumuşakça karışır; hem taban hem lekeler kayar */ html[data-zemin="meta"] .bant.gradyan .b-ic{background-color:var(--grad-zemin);background-image:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 30%,var(--grad-3) 60%,var(--grad-4) 100%);background-size:240% 240%;background-position:0% 0%;animation:meta-akis 32s ease-in-out infinite alternate;animation-duration:calc(32s*var(--hiz,1))} html[data-zemin="meta"] .bant.gradyan .b-ic::before{background:radial-gradient(closest-side,rgba(251,222,210,.9) 0%,rgba(251,222,210,.45) 45%,rgba(251,222,210,0) 100%)} html[data-zemin="meta"] .bant.gradyan .b-ic::after{background:radial-gradient(closest-side,rgba(205,224,243,.9) 0%,rgba(205,224,243,.45) 45%,rgba(205,224,243,0) 100%)} html[data-zemin="meta"][data-hiz="kapali"] .bant.gradyan .b-ic{animation:none} html[data-zemin="meta"] .bant.gradyan.durdur .b-ic{animation-play-state:paused} @keyframes meta-akis{0%{background-position:0% 0%}50%{background-position:100% 40%}100%{background-position:30% 100%}} /* ==== NORMAL AÇILIR MENÜ (Projeler, İcan's Home) ==== */ .dd-sar{position:relative;display:inline-flex} .dd{display:none} @media(min-width:1024px){ .dd{display:block;position:absolute;left:-20px;top:100%;min-width:268px;margin-top:6px;padding:var(--s3) 0 var(--s2);background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 36px rgba(43,39,35,.14);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;z-index:35} .dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .dd.acik{visibility:visible;opacity:1;transform:none;transition-delay:0s} .dd ul{list-style:none;margin:0;padding:0 var(--s2)} .dd li .bslk{display:flex;align-items:center;min-height:32px;padding:0 var(--s3);color:var(--altin);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700} .dd li a,.dd li .pasif{display:flex;align-items:center;min-height:40px;padding:0 var(--s3);color:var(--ink);font-size:14px;text-decoration:none;transition:background-color .15s ease,color .15s ease} @media(hover:hover){.dd li a:is(:hover,:focus-visible){background:var(--calm);color:var(--altin)}} @media(pointer:coarse){.dd li a,.dd li .pasif{min-height:44px}} } /* ==== Bant görselleri: kaydırılabilir şerit (parmak, fare, ok tuşları) + otomatik geçiş ==== */ .bant .b-foto{position:relative} .b-pist{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y pinch-zoom} .b-pist::-webkit-scrollbar{display:none} .b-pist.surukle{scroll-snap-type:none;cursor:grabbing} .bant .b-pist img{position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;pointer-events:none;-webkit-user-drag:none} .b-pist:focus-visible{outline:3px solid var(--beyaz);outline-offset:-6px;box-shadow:inset 0 0 0 6px var(--ink)} .b-kontrol{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:2px 12px 2px 2px;background:rgba(255,255,255,.92);border-radius:999px} .b-dur{width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;border-radius:50%} .b-dur svg{width:18px;height:18px}.b-dur .i-oyn{display:none} .b-dur[aria-pressed="true"] .i-dur{display:none}.b-dur[aria-pressed="true"] .i-oyn{display:block} .b-nokta{display:inline-flex;gap:0} .b-n{width:24px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center} .b-n::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink);transition:background-color .3s ease,width .3s ease} .b-n.on::before{background:var(--ink);width:18px;border-radius:4px} @media(hover:hover){.b-n:is(:hover,:focus-visible)::before{background:var(--ink)}} @media(pointer:coarse){.b-n{width:44px}} .logo{min-height:44px;display:inline-flex;align-items:center} html[data-bantgor="tek"] .b-pist{overflow:hidden;cursor:default} html[data-bantgor="tek"] .b-pist img:not(:first-child){display:none} html[data-bantgor="tek"] .b-kontrol{display:none} .serit{cursor:grab}.serit.surukle,.serit.anlik{scroll-snap-type:none}.serit.surukle{cursor:grabbing}.serit a,.serit button{cursor:pointer} html[data-hero="b"] .slayt .kart .etiket,html[data-hero="b"] .slayt .kart .display,html[data-hero="b"] .slayt .kart .lead{text-shadow:0 1px 14px rgba(20,17,15,.45)} @media(min-width:768px) and (max-width:1023px){ .bant{grid-template-columns:9fr 8fr;min-height:440px} .bant.ters{grid-template-columns:8fr 9fr} .bant .b-foto{aspect-ratio:auto;height:100%;position:relative} .bant .b-ic{padding:var(--s7) 9%} .bant.ters .b-foto{order:2}.bant.ters .b-ic{order:1} .bant .h2{max-width:15ch} } /* ==== ORTAK İÇERİK BİLEŞENLERİ (kategori + takım + kit) ==== */ /* breadcrumb (kırıntı): · .sik = 8 px üst boşluk */ .kirinti{padding-top:var(--s3)} .kirinti.sik{padding-top:var(--s2)} .kirinti ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:var(--f-small);color:var(--ink-2)} .kirinti a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px} .kirinti li+li::before{content:"›";margin-right:var(--s2);color:var(--ink-2)} .kirinti [aria-current]{color:var(--ink);font-weight:600} /* onay listesi (sağlıklı oda maddeleri): ✓ ikon + metin, 768+ iki sütun */ .onay-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2) var(--s5)} .onay-liste li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--f-body);line-height:1.5} .onay-liste svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--altin)} @media(min-width:768px){.onay-liste{grid-template-columns:1fr 1fr}} /* akordeon (SSS, ürün ayrıntıları): details/summary + svg ok; içerik

ya da

*/ .akordeon{border-top:1px solid var(--line)} .akordeon details{border-bottom:1px solid var(--line)} .akordeon summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding-block:var(--s3);cursor:pointer;font-weight:600;list-style:none} .akordeon summary::-webkit-details-marker{display:none} .akordeon summary svg{flex:none;width:20px;height:20px;color:var(--altin);transition:transform .25s ease} .akordeon details[open] summary svg{transform:rotate(180deg)} .akordeon details>p,.akordeon .ic{padding:0 0 var(--s4);color:var(--ink-2);max-width:var(--olcu)} .akordeon .ic{display:grid;gap:var(--s2)} .akordeon dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4)} .akordeon dt{font-weight:600;color:var(--ink)}.akordeon dd{margin:0} /* çip seçili durumu (filtre çipi olarak button.cip) */ button.cip{font:inherit;font-size:var(--f-small);font-weight:600;color:var(--ink);cursor:pointer} .cip[aria-pressed="true"]{background:var(--ink);color:var(--yazi-ters);border-color:var(--ink)} /* pastel yer tutucu tonları (--yt) ve renk örnekleri (--r): satır içi stil yerine sınıf */ .yt-pudra{--yt:var(--pudra)}.yt-adacayi{--yt:var(--adacayi)}.yt-bulut{--yt:var(--bulut)}.yt-krem{--yt:var(--krem)} .yt-pudra-a{--yt:var(--pudra-a)}.yt-adacayi-a{--yt:var(--adacayi-a)}.yt-bulut-a{--yt:var(--bulut-a)}.yt-keten{--yt:var(--keten)} .r-bulut{--r:var(--renk-bulut)}.r-adacayi{--r:var(--renk-adacayi)}.r-pudra{--r:var(--renk-pudra)}.r-ahsap{--r:var(--renk-ahsap)} /* ==== KATEGORİ SAYFASI (yalnız bu sayfa; önek kat-) ==== */ .kat-hero{display:grid;gap:var(--s5);align-items:center} .kat-hero-ic{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)} .kat-hero-ic .display{max-width:18ch} .kat-hero-ic .btn{margin-top:0} .kat-eylem .btn{min-width:220px;justify-content:center} .kat-eylem{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)} .kat-ikinci{display:inline-flex;align-items:center;min-height:44px;font-size:var(--f-small);font-weight:600;color:var(--eylem);text-decoration:underline;text-underline-offset:4px} .kat-ikinci:focus-visible{outline:2px solid currentColor;outline-offset:3px} .kat-hero-foto{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--calm);margin-inline:calc(var(--gut) * -1)} .kat-hero-foto img{width:100%;height:100%;object-fit:cover} @media(min-width:768px){.kat-hero-foto{margin-inline:0;border-radius:2px}} @media(min-width:1024px){.kat-hero{grid-template-columns:5fr 7fr;gap:var(--s8)}.kat-hero-foto{aspect-ratio:auto;height:460px}} /* atla çipleri: yapışkan */ .kat-atla{position:sticky;top:var(--h-bar);z-index:20;background:var(--bulut-serit);border-block:1px solid var(--bulut)} .kat-atla-et{display:none} @media(min-width:768px){.kat-atla{margin-top:var(--s6)}.kat-atla .kap{align-items:center;gap:var(--s2)}.kat-atla-et{display:block;flex:none;margin-right:var(--s3);font-size:var(--f-xs,12px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}} @media(min-width:1024px){.kat-atla{top:var(--h-bar-d)}} .kat-atla .kap{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding-block:var(--s2)} .kat-atla .kap::-webkit-scrollbar{display:none} .kat-cip{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 var(--s4);border:1px solid rgba(43,39,35,.28);background:var(--zemin-kart);border-radius:999px;font-size:var(--f-small);font-weight:600;text-decoration:none;color:var(--ink);transition:background-color .2s ease,border-color .2s ease} @media(hover:hover){.kat-cip:is(:hover,:focus-visible){background:var(--calm);border-color:var(--ink)}} html[data-sayfa="kategori"]{scroll-padding-top:96px} @media(min-width:1024px){html[data-sayfa="kategori"]{scroll-padding-top:112px}} /* güven kartları: .gk (yukarıda); burada bağlantısız */ .kat-guven .gk{cursor:default} @media(hover:hover){.kat-guven .gk:is(:hover,:focus-visible){transform:none;box-shadow:none}} /* sağlıklı oda listesi */ /* neden İcan's */ /* rehber + SSS */ .kat-rehber{display:grid;gap:var(--s6)} .kat-rehber .ic{display:grid;gap:var(--s3);max-width:var(--olcu)} @media(min-width:1024px){.kat-rehber{grid-template-columns:5fr 6fr;gap:var(--s8)}} /* yer tutucu (yazısız, nötr pastel) */ .kat-yt{width:100%;height:100%;background:var(--yt,var(--keten))} /* takımlar */ .kat-takim{display:grid;gap:var(--s5)} .kat-tk{display:flex;flex-direction:column;gap:var(--s4);background:transparent;color:var(--ink);text-decoration:none} .kat-tk .kat-foto{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-2);border-radius:2px;transition:border-color .2s ease} @media(hover:hover){.kat-tk:is(:hover,:focus-visible) .kat-foto{border-color:var(--ink)}} .kat-tk .kat-foto .kat-yt{background:rgba(255,255,255,.45)} .kat-tk .kat-foto.zemin-beyaz{background:var(--zemin-kart)} .kat-tk .kat-foto.zemin-beyaz img{width:100%;height:100%;object-fit:contain} .kat-tk-ic{padding:0;display:grid;gap:var(--s1)} .kat-tk-ic h3{font-size:var(--f-body);font-weight:600;line-height:1.3} .kat-tk-ic p{font-size:var(--f-small);color:var(--yazi-orta)} .kat-renk{display:flex;flex-wrap:wrap;gap:var(--s3);list-style:none;margin:var(--s1) 0 0;padding:0;font-size:var(--f-small);color:var(--yazi-orta)} .kat-renk li{display:inline-flex;align-items:center;gap:6px} .kat-renk i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(43,39,35,.35);background:var(--r)} .kat-tk .lnk{margin-top:var(--s2);font-size:var(--f-small)} @media(hover:hover){.kat-tk:is(:hover,:focus-visible) .ok{transform:translateX(var(--ok-kayma))}} @media(min-width:768px){.kat-takim{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.kat-takim{grid-template-columns:repeat(4,1fr)}} /* parçalar */ .kat-arac{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)} .kat-arac-sag{display:flex;gap:var(--s2);flex-wrap:wrap} .kat-sayi{font-size:var(--f-small);color:var(--ink-2)} .kat-sec{position:relative;display:inline-flex} .kat-sec select{appearance:none;-webkit-appearance:none;min-height:var(--h-btn);padding:0 40px 0 var(--s4);border:1px solid var(--line-input);border-radius:var(--r-btn);background:var(--zemin-kart);color:var(--ink);font:600 var(--f-small) var(--yazi);cursor:pointer} .kat-sec svg{position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none} .kat-filtre-btn{min-height:var(--h-btn);font-size:var(--f-btn-k)} .kat-filtre-btn svg{width:18px;height:18px} .kat-filtre-btn .kat-rozet{display:none;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--altin);color:var(--yazi-ters);font-size:12px;line-height:22px;text-align:center} .kat-filtre-btn.etkin .kat-rozet{display:inline-block} .kat-filtre{border:1px solid var(--line);background:var(--calm);padding:var(--s4);margin-bottom:var(--s5);display:grid;gap:var(--s4)} .kat-filtre[hidden]{display:none} .kat-filtre fieldset{border:0;margin:0;padding:0} .kat-filtre legend{padding:0;margin-bottom:var(--s2);font-size:var(--f-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .kat-sec-g{display:flex;flex-wrap:wrap;gap:var(--s2)} .kat-fc{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s4);border:1px solid rgba(43,39,35,.28);background:var(--zemin-kart);border-radius:999px;font:600 var(--f-small) var(--yazi);color:var(--ink);cursor:pointer} .kat-fc[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--yazi-ters)} .kat-fc i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(43,39,35,.35);background:var(--r)} .kat-filtre-alt{display:flex;gap:var(--s3);flex-wrap:wrap} .kat-urunler{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s3);list-style:none;margin:0;padding:0} .kat-ur a{display:flex;flex-direction:column;gap:var(--s2);color:var(--ink);text-decoration:none;min-height:44px} .kat-ur .kat-foto{aspect-ratio:1;overflow:hidden;border-radius:2px} .kat-ur .kat-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--gecis) ease} .kat-foto.zemin-beyaz{background:var(--zemin-kart);border:1px solid var(--line-2)} .kat-ur .kat-foto.zemin-beyaz img{object-fit:contain} .kat-ur h3{font-size:var(--f-body);font-weight:600;line-height:1.3;width:fit-content;max-width:100%;--alt-iz:transparent} .kat-ur p{font-size:var(--f-small);color:var(--ink-2)} @media(hover:hover){.kat-ur a:is(:hover,:focus-visible) .kat-foto img{transform:scale(var(--hover-olcek))}} .kat-ur[hidden]{display:none} .kat-bos{padding:var(--s7) var(--s4);background:var(--calm);text-align:center;display:grid;justify-items:center;gap:var(--s3)} .kat-bos[hidden]{display:none} .kat-daha{display:flex;justify-content:center;margin-top:var(--s6)} .kat-daha[hidden]{display:none} @media(min-width:768px){.kat-urunler{grid-template-columns:repeat(3,1fr);gap:var(--s6) var(--s5)}} @media(min-width:1024px){.kat-urunler{grid-template-columns:repeat(4,1fr)}} .kat-son{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;padding:var(--s6) var(--s4);background:var(--bulut)} .kat-son p{color:var(--yazi-orta);max-width:var(--olcu)} @media(min-width:1024px){.kat-son{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s7);padding:var(--s7)}.kat-son .ic{display:grid;gap:var(--s2)}} .kat-fiyat{font-size:var(--f-body)!important;font-weight:700;color:var(--ink)!important} .kat-ornek{display:inline-block;padding:2px var(--s2);background:var(--mark);color:var(--mark-fg);font-size:var(--f-label);font-weight:600;border-radius:2px;margin-bottom:var(--s4)} .kat-arac .kat-ornek{margin:0} .kat-ornek[hidden],.kat-fiyat[hidden]{display:none} /* ==== TAKIM SAYFASI (yalnız bu sayfa; önek tk-) ==== */ /* ana ızgara: mobilde doğal sıra; masaüstünde sol galeri+bilgi, sağ yapışkan satın alma */ .tk-izgara{display:grid;gap:var(--s6);align-items:start} .tk-izgara>*{min-width:0} @media(min-width:1024px){ .tk-izgara{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s8);row-gap:var(--s7)} .tk-galeri{grid-column:1;grid-row:1} .tk-al{grid-column:2;grid-row:1/span 6;position:sticky;top:calc(var(--h-bar-d) + var(--s4));align-self:start} .tk-sol{grid-column:1} } /* galeri (fotoğraf yok: nötr pastel yer tutucu) */ .tk-galeri{position:relative;margin-inline:calc(var(--gut) * -1)} @media(min-width:768px){.tk-galeri{margin-inline:0}} .tk-sahne{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bulut)} @media(min-width:1024px){.tk-sahne{aspect-ratio:4/3}} .tk-kare{position:absolute;inset:0;background:var(--yt)} .tk-kare[hidden]{display:none} .tk-gal-ok{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer} .tk-gal-ok svg{width:20px;height:20px} .tk-gal-ok.g{left:var(--s3)}.tk-gal-ok.i{right:var(--s3)} .tk-sayac{position:absolute;left:var(--s3);bottom:var(--s3);padding:var(--s1) var(--s3);border-radius:999px;background:rgba(255,255,255,.92);font-size:var(--f-small);font-weight:600;color:var(--ink)} .tk-fav-ik{position:absolute;top:var(--s3);right:var(--s3);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer} .tk-fav-ik svg{width:22px;height:22px} .tk-fav-ik[aria-pressed="true"] svg,.tk-fav[aria-pressed="true"] svg{fill:var(--altin);color:var(--altin)} .tk-kucukler{display:none} @media(min-width:1024px){ .tk-kucukler{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2);margin-top:var(--s3)} .tk-kucukler button{min-height:48px;aspect-ratio:4/3;border:2px solid transparent;padding:0;background:var(--yt);cursor:pointer;border-radius:2px} .tk-kucukler button[aria-current="true"]{border-color:var(--ink)} } /* satın alma sütunu */ .tk-al{display:grid;gap:var(--s5)} .tk-bas{display:grid;gap:var(--s1)} .tk-bas h1{font-family:var(--yazi-baslik);font-weight:400;font-size:var(--f-h1);line-height:1.15;letter-spacing:-.01em} .tk-alt-s{font-size:var(--f-small);color:var(--ink-2)} .tk-al fieldset{border:0;margin:0;padding:0;min-width:0} .tk-al legend{padding:0;margin-bottom:var(--s3);font-size:var(--f-body);font-weight:600} .tk-mod{display:grid;gap:var(--s2)} .tk-sec{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s3);align-items:start;min-height:48px;padding:var(--s3) var(--s4);border:1px solid var(--line-input);border-radius:var(--r-btn);background:var(--zemin-kart);cursor:pointer} .tk-sec input{position:absolute;opacity:0;width:1px;height:1px} .tk-sec i{width:20px;height:20px;margin-top:2px;border-radius:50%;border:1.5px solid var(--ink);background:var(--zemin-kart);box-shadow:inset 0 0 0 4px var(--beyaz)} .tk-sec:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .tk-sec:has(input:checked) i{background:var(--ink)} .tk-sec:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px} .tk-sec b{display:block;font-weight:600} .tk-sec small{display:block;font-size:var(--f-small);color:var(--ink-2);line-height:1.45} .tk-parca{display:grid;margin-top:var(--s3);border-top:1px solid var(--line)} .tk-parca[hidden]{display:none} .tk-satir{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line)} .tk-satir b{display:block;font-weight:600} .tk-satir small{display:block;font-size:var(--f-small);color:var(--ink-2)} .tk-adet{display:flex;align-items:center;flex:none} .tk-adet button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-input);background:var(--zemin-kart);color:var(--ink);font:600 20px/1 var(--yazi);cursor:pointer;border-radius:var(--r-btn)} .tk-adet button[aria-disabled="true"]{color:var(--line-input);cursor:not-allowed} .tk-adet output{min-width:32px;text-align:center;font-weight:600} .tk-toplam{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-top:var(--s3);font-weight:600} .tk-uyari{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--krem);font-size:var(--f-small);color:var(--ink)} .tk-renkler{display:flex;flex-wrap:wrap;gap:var(--s2)} .tk-renk{position:relative;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4) 0 var(--s2);border:1px solid rgba(43,39,35,.28);border-radius:999px;background:var(--zemin-kart);font-size:var(--f-small);font-weight:600;cursor:pointer} .tk-renk input{position:absolute;opacity:0;width:1px;height:1px} .tk-renk i{width:28px;height:28px;border-radius:50%;border:1px solid rgba(43,39,35,.35);background:var(--r)} .tk-renk:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .tk-renk:has(input:checked)::after{content:"";width:10px;height:6px;margin-left:2px;border:solid var(--ink);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-2px)} .tk-renk:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px} .tk-renk-hata{display:none;margin-top:var(--s2);font-size:var(--f-small);font-weight:600;color:var(--hata-yazi)} .tk-renk-f.hata .tk-renk-hata{display:block} .tk-renk-f.hata .tk-renk{border-color:var(--hata-yazi)} .tk-ozel-r{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s1);font-size:var(--f-small);font-weight:600;color:var(--eylem);text-decoration:underline;text-underline-offset:4px} .tk-teslim{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--f-small)} .tk-teslim svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--altin)} .tk-icerik h2{font-size:var(--f-body);font-weight:600;margin-bottom:var(--s2)} .tk-icerik-d h2{font-size:var(--f-h2);margin-bottom:var(--s4)} .tk-icerik ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .tk-icerik li{display:flex;justify-content:space-between;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line);font-size:var(--f-small)} .tk-icerik li span:last-child{color:var(--ink-2);text-align:right} .tk-icerik[hidden]{display:none} .tk-icerik-d{display:none} @media(min-width:1024px){.tk-icerik-m{display:none!important}.tk-icerik-d{display:block}.tk-icerik-d li{font-size:var(--f-body)}} .tk-cta{display:grid;gap:var(--s2)} .tk-cta .btn.p{width:100%} .tk-cta .btn[hidden]{display:none} .tk-ikincil{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)} .tk-ikincil .btn{padding:0 var(--s3);font-size:var(--f-btn-k)} .tk-ikincil svg{width:18px;height:18px} .tk-durum{font-size:var(--f-small);color:var(--ink-2)} .tk-durum:empty{display:none} .tk-ozel{padding:var(--s5) var(--s4);background:var(--bulut);display:grid;gap:var(--s2);justify-items:start} .tk-ozel h2{font-size:var(--f-body);font-weight:600} .tk-ozel p{font-size:var(--f-small);color:var(--yazi-orta)} .tk-teshir{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:var(--f-small);font-weight:600;color:var(--ink);text-decoration:none} .tk-teshir::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--altin-o);flex:none} @media(min-width:1024px){.tk-al{gap:var(--s4)}.tk-ozel{padding:var(--s4)}} .tk-bolum h2{margin-bottom:var(--s4)} .tk-tam{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0} @media(min-width:768px){.tk-tam{grid-template-columns:1fr 1fr}} .tk-tm{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s3);background:var(--tm)} .tk-tm:nth-child(1){--tm:var(--pudra)}.tk-tm:nth-child(2){--tm:var(--bulut)} .tk-tm .tk-yt{aspect-ratio:1;background:rgba(255,255,255,.5)} .tk-tm h3{font-size:var(--f-body);font-weight:600;line-height:1.3} .tk-tm .btn{margin-top:var(--s2);min-height:44px;min-width:88px;padding:0 var(--s4);font-size:var(--f-btn-k)} .tk-tm .btn[aria-pressed="true"]{background:var(--ink);color:var(--yazi-ters);border-color:var(--ink)} .tk-saglik{background:var(--calm);padding:var(--s6) var(--gut);margin-inline:calc(var(--gut) * -1)} @media(min-width:768px){.tk-saglik{margin-inline:0;padding:var(--s6)}} .tk-saglik .kucuk{margin:var(--s2) 0 var(--s4)} .tk-odalar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);list-style:none;margin:0;padding:0} .tk-odalar li{aspect-ratio:3/4;background:var(--yt)} @media(min-width:1024px){.tk-odalar{grid-template-columns:repeat(4,1fr);gap:var(--s5)}} .tk-odalar li:nth-child(1){--yt:var(--pudra)}.tk-odalar li:nth-child(2){--yt:var(--bulut)}.tk-odalar li:nth-child(3){--yt:var(--adacayi)}.tk-odalar li:nth-child(4){--yt:var(--krem)} /* takım sayfası alt çubuğu: → ust.js .altcubuk.takim üretir */ .altcubuk.takim{grid-template-columns:.8fr 1fr 1.7fr} .altcubuk.takim .btn.p{padding:0 var(--s2)} /* tek düğmeli alt çubuk (yalnız Ara): yayın aracı WhatsApp/proje talebi kapalıyken ust.js .altcubuk.tek üretir */ .altcubuk.tek{grid-template-columns:1fr} /* iki düğmeli alt çubuk (Ara + WhatsApp, 09.11.2026): 3. hücre yayında değilken yayın aracı .altcubuk.iki üretir */ .altcubuk.iki{grid-template-columns:1fr 1fr} html[data-sayfa="takim"]{scroll-padding-top:120px} @media(min-width:1024px){html[data-sayfa="takim"]{scroll-padding-top:112px}} .tk-renk-f.titre{animation:tk-titre .4s ease} @keyframes tk-titre{0%,100%{transform:none}30%{transform:translateX(-4px)}60%{transform:translateX(var(--ok-kayma))}} .tk-fiyat{margin-top:var(--s2);font-size:var(--f-h2);font-weight:700;line-height:1.2} .tk-fiyat-alt{font-size:var(--f-small);color:var(--ink-2)} .tk-ornek{justify-self:start;margin-top:var(--s1);padding:2px var(--s2);background:var(--mark);color:var(--mark-fg);font-size:var(--f-label);font-weight:600;border-radius:2px} .tk-satir small[data-fiyat]{color:var(--ink);font-weight:600} /* ===================================================================== GELECEK BİLEŞENLER (kitte tanımlı; henüz üç sayfada kullanılmıyor) Eski kit sayfasından taşındı. Site sınıflarıyla çakışanlar yeniden adlandırıldı: .kart→.ukart · .sayac→.adet-sayac · .cekmece→.sepet-cekmece · .ugal .geri/.ileri→.onceki/.sonraki ===================================================================== */ /* yazı stilleri (kit adları; site karşılığı: .display, .h2, .h3, .lead, .kucuk, .etiket) */ .t-display,.t-h1{font-family:var(--yazi-baslik)} .t-display{font-size:var(--f-display);line-height:1.15;font-weight:600;letter-spacing:-.01em;text-wrap:balance} .t-h1{font-size:var(--f-h1);line-height:1.2;font-weight:600;text-wrap:balance} .t-h2{font-size:var(--f-h2);line-height:1.25;font-weight:600;text-wrap:balance} .t-sayi{font-size:var(--f-h2);line-height:1.1;font-weight:400} .t-lead{font-size:var(--f-lead);line-height:1.5;color:var(--ink-2)} .t-body{font-size:var(--f-body);line-height:1.6;color:var(--ink-2)} .t-small{font-size:var(--f-small);line-height:1.5;color:var(--ink-2)} .t-label{font-size:var(--f-label);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .t-ad{font-size:var(--f-body);line-height:1.4;font-weight:600;color:var(--ink)} .t-fiyat{font-size:var(--f-small);line-height:1.4;font-weight:700;color:var(--ink)} .t-hata{color:var(--err);font-weight:600} .olc{max-width:65ch} /* düğme durumları ve alternatifleri */ .btn.tam{width:100%} .btn[disabled],.btn.pasif{opacity:.4;cursor:not-allowed} .btn.yuk::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:don .8s linear infinite} @keyframes don{to{transform:rotate(360deg)}} .btn.odak{outline:2px solid var(--focus);outline-offset:2px} .btn.p.odak{outline:none;box-shadow:0 0 0 2px var(--beyaz),0 0 0 4px var(--ink)} .btn .kalp{display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)} @media (hover:hover){.btn:not(.p):not(.metin):not([disabled]):is(:hover,:focus-visible) .kalp{transform:scale(1.3)}} /* düğme alternatifleri (kit sayfasındaki seçici; varsayılan C = site) · html[data-dugme] */ html[data-dugme="b"]{--r-btn:8px;--btn2-r:8px;--btn-radius:8px} html[data-dugme="d"]{--r-btn:999px;--btn2-r:999px;--btn-radius:999px} html[data-dugme="d"] .btn:not(.p):not(.metin){border-color:var(--altin-o)} html[data-dugme="e"]{--r-btn:0px;--btn2-r:0px;--btn-radius:0px} html[data-dugme="e"] .btn{letter-spacing:.08em;text-transform:uppercase} html[data-dugme="e"] .btn.p::after{content:"→";letter-spacing:0} /* ikon düğme sayaç rozeti */ .ikon:has(.say){position:relative} .ikon .say{position:absolute;top:6px;right:4px;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:var(--yazi-ters);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px} /* CTA kalıpları (1, 2, 5, 6, 7, 9, 10) */ .c1{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--altin);color:var(--yazi-ters);font-weight:600;font-size:var(--f-btn);border-radius:4px;text-decoration:none} .c2{display:flex;flex-direction:column;align-items:flex-start;padding:12px 20px;background:var(--altin);color:var(--yazi-ters);border-radius:4px;text-decoration:none;min-height:56px} .c2 span{font-weight:600;font-size:var(--f-btn)}.c2 small{font-size:13px;opacity:.9} .c5{align-self:flex-start;font-family:var(--yazi-baslik);font-size:var(--f-h2);color:var(--ink);text-decoration:none;--alt-iz:var(--altin);--alt-kalin:2px;padding-bottom:8px} /* çizgi: ortak .alt kalıbı (başlık boyu için 2px) */ .c6{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);min-height:72px} .c6 .ik{width:44px;height:44px;border-radius:50%;background:var(--altin-a);display:grid;place-items:center;color:var(--altin)} .c6 b{display:block}.c6 small{color:var(--ink-2);font-size:var(--f-small)} .c6 .ok{display:inline-block;color:var(--altin);font-size:20px} .c7{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:12px;align-items:center;padding:8px;background:var(--zemin-kart);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(43,39,35,.08);width:100%} .c7 b{display:block;font-size:var(--f-small);line-height:1.3;overflow-wrap:anywhere}.c7 small{display:block;font-size:var(--f-small);font-variant-numeric:tabular-nums;font-weight:700} .c7 .wa{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--btn2-kenar);background:var(--btn2-zemin);color:var(--btn2-yazi);border-radius:4px;font-weight:700;text-decoration:none} .c7 a:not(.wa){display:grid;place-items:center;min-height:48px;padding:0 16px;background:var(--altin);color:var(--yazi-ters);font-weight:600;font-size:var(--f-btn-k);border-radius:4px;text-decoration:none} .c9{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .c9 .h{color:var(--ink);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:8px} .c9 .h::before{content:"";width:24px;height:1px;background:var(--altin);transition:width .25s ease} .c10{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--calm);border-left:3px solid var(--altin)} .c10 b{font-family:var(--yazi-baslik);font-size:var(--f-h2);font-weight:600;line-height:1.2} .c10 p{margin:0;color:var(--ink-2);font-size:var(--f-small)} .c10 a{align-self:flex-start;margin-top:8px} .c1,.c2,.c7 a,.c6,.c6 .ok{transition:transform var(--gecis-hizli) ease,box-shadow var(--gecis-hizli) ease,background-color var(--gecis-hizli) ease} @media (hover:hover){ .c6:is(:hover,:focus-visible){border-color:var(--altin);background:var(--calm)}.c6:is(:hover,:focus-visible) .ok{transform:translateX(var(--ok-kayma))} .c9 .h:is(:hover,:focus-visible)::before{width:40px} .c1:is(:hover,:focus-visible),.c2:is(:hover,:focus-visible),.c7 a:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:0 6px 14px var(--eylem-golge)} .c7 .wa:is(:hover,:focus-visible){background:var(--btn2-kenar);color:var(--yazi-ters)} } html[data-altin="p"] .c1,html[data-altin="p"] .c2,html[data-altin="p"] .c7 a{background:var(--altin-o);color:var(--ink)} @media (hover:hover){html[data-altin="p"] .c1:is(:hover,:focus-visible),html[data-altin="p"] .c2:is(:hover,:focus-visible),html[data-altin="p"] .c7 a:is(:hover,:focus-visible){background:var(--altin-p-h)}} /* proje önizleme (yetişkin yüzey) */ .proje-onizle{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--s4)} .proje-onizle figure{margin:0;min-width:0} .proje-onizle .po{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);color:var(--ink);min-height:200px} .proje-onizle .po.keten{background:var(--keten)}.proje-onizle .po.tas{background:var(--tas)}.proje-onizle .po.kil{background:var(--kil)} .proje-onizle .po b{font-family:var(--yazi-baslik);font-size:var(--f-h2);font-weight:600;line-height:1.2} .proje-onizle .po i{display:block;width:40px;height:2px;background:var(--altin)} .proje-onizle .po p{margin:0;font-size:var(--f-small);color:var(--ink-2)} .proje-onizle .po span{align-self:flex-start;margin-top:auto;min-height:48px;display:inline-flex;align-items:center;padding:0 var(--s5);background:var(--ink);color:var(--yazi-ters);font-weight:600;font-size:var(--f-btn);border-radius:4px} .proje-onizle .po span.altin{background:var(--altin)} .proje-onizle figcaption{font-size:var(--f-label);color:var(--ink-2);padding-top:var(--s2);line-height:1.45} /* içerik */ .madde{display:grid;gap:var(--s2) var(--s4);grid-template-columns:repeat(2,minmax(0,1fr));padding:0;margin:0;list-style:none} .madde li{font-size:var(--f-small);line-height:1.4;color:var(--ink-2);padding-left:var(--s4);position:relative} .madde li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--ink-3)} .sayilar-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);width:100%;max-width:360px} .img{background:repeating-linear-gradient(135deg,var(--box) 0 10px,var(--box-2) 10px 12px);display:flex;align-items:flex-end;padding:var(--s3);font-size:var(--f-small);color:var(--ink-3);max-width:100%} .img.soluk{opacity:.55} .r43{aspect-ratio:4/3}.r11{aspect-ratio:1}.r34{aspect-ratio:3/4}.r169{aspect-ratio:16/9} /* ürün/takım kartı (kit) */ .ukart{display:flex;flex-direction:column;width:100%;max-width:300px;position:relative} .ukart.dar{max-width:160px} .ukart .img{margin-bottom:var(--s3)} .ukart .t-ad+*{margin-top:var(--s1)} .ukart .fav{position:absolute;top:var(--s2);right:var(--s2);background:var(--surface)} .ukart .btn{margin-top:var(--s2)} .ukart s{font-weight:400;color:var(--ink-3)} .rozet{position:absolute;top:var(--s2);left:var(--s2);font-size:var(--f-label);font-weight:700;letter-spacing:.04em;background:var(--surface);border:1px solid var(--ink);padding:2px var(--s2)} .rozet.koyu{background:var(--ink);color:var(--surface)} .renkler{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s2)} .renkler span{display:inline-flex;align-items:center;gap:6px;font-size:var(--f-label);color:var(--ink-2)} .renkler i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line);background:var(--r,var(--box))} .odalar-k{display:flex;gap:var(--s3)} .oda{display:flex;flex-direction:column;gap:var(--s2);width:110px;text-decoration:none} .oda b{font-size:var(--f-body);min-height:var(--h-link);display:flex;align-items:center} .mimar{display:grid;grid-template-columns:72px 1fr;gap:var(--s4);align-items:center;width:100%;max-width:340px} .mimar .img{aspect-ratio:1;padding:0} /* ürün */ .fiyat-b{display:flex;flex-direction:column;gap:var(--s1)} .fiyat-b .ana{font-size:var(--f-h2);font-weight:700;line-height:1.2} .fiyat-b s{color:var(--ink-3);font-size:var(--f-small)} .teslim{display:flex;gap:var(--s3);align-items:center;font-size:var(--f-small);color:var(--ink-2);min-height:var(--h-link)} .teslim i{width:20px;height:20px;border:1.5px solid var(--ink-3);flex:none} .renk-sec{display:flex;flex-direction:column;gap:var(--s2)} .renk-sec .ust-s{display:flex;justify-content:space-between;font-size:var(--f-small);font-weight:600} .renk-sec .ust-s span{font-weight:400;color:var(--ink-2)} .renk-sec .liste{display:flex;flex-wrap:wrap;gap:var(--s2)} .renk-sec button{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--h-link);padding:0 var(--s3);border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;font-size:var(--f-small)} .renk-sec button i{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--r,var(--box))} .renk-sec button[aria-checked="true"]{border:2px solid var(--ink);font-weight:600} .adet-sayac{display:inline-grid;grid-template-columns:44px 44px 44px;border:1px solid var(--line);align-items:center} .adet-sayac button{height:44px;border:0;background:var(--box-2);cursor:pointer;font-size:18px} .adet-sayac button[disabled]{opacity:.35;cursor:not-allowed} .adet-sayac output{text-align:center;font-weight:700} .secim{display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:360px} .secim label{display:grid;grid-template-columns:22px 1fr auto;gap:var(--s3);align-items:center;border:1.5px solid var(--line);padding:var(--s3);cursor:pointer;min-height:56px} .secim input{width:18px;height:18px;margin:0;accent-color:var(--ink)} .secim label:has(input:checked){border-color:var(--ink)} .secim b{display:block;font-size:var(--f-small)} .secim small{display:block;font-size:var(--f-label);color:var(--ink-2)} .secim .p{font-size:var(--f-small);font-weight:700;text-align:right} /* form */ .alan{display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:360px} .alan label{font-size:var(--f-small);font-weight:600} .alan label i{font-style:normal;color:var(--ink-3);font-weight:400} .alan input,.alan select,.alan textarea{min-height:var(--h-btn);padding:0 var(--s4);border:1.5px solid var(--line-input);background:var(--surface);font:inherit;font-size:var(--f-body);color:var(--ink);border-radius:var(--r);width:100%} .alan textarea{padding:var(--s3) var(--s4);min-height:96px} @media (hover:hover){.alan input:hover,.alan select:hover{border-color:var(--ink-3)}} .alan input:focus,.alan select:focus,.alan textarea:focus{border-color:var(--ink);outline:2px solid var(--focus);outline-offset:1px} .alan .yardim{font-size:var(--f-label);color:var(--ink-2)} .alan.hata input{border-color:var(--err)} .alan.hata .yardim{color:var(--err);font-weight:600} .alan input[readonly]{background:var(--box-2)} .kutucuk{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--h-link);font-size:var(--f-small);max-width:360px;cursor:pointer} .kutucuk input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:none} .yukle{border:1.5px dashed var(--line);padding:var(--s5);text-align:center;font-size:var(--f-small);width:100%;max-width:360px;display:grid;gap:var(--s2)} .yukle input{width:100%;max-width:100%} .ilerleme{height:6px;background:var(--box-2)}.ilerleme i{display:block;height:100%;width:60%;background:var(--ink)} .ozet-hata{border:1.5px solid var(--err);background:var(--err-bg);color:var(--err);padding:var(--s3) var(--s4);font-size:var(--f-small);width:100%;max-width:360px} .ozet-ok{border:1.5px solid var(--ok);background:var(--ok-bg);color:var(--ok);padding:var(--s3) var(--s4);font-size:var(--f-small);width:100%;max-width:360px} /* geri bildirim */ .sepet-cekmece{width:100%;max-width:360px;border-top:2px solid var(--ink);background:var(--surface);padding:var(--s4) var(--gut) var(--s5);display:grid;gap:var(--s3);box-shadow:0 -8px 24px rgba(0,0,0,.08)} .sepet-cekmece .tut{width:40px;height:4px;background:var(--line);justify-self:center} .satir-hata{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);border:1.5px solid var(--err);padding:var(--s3);max-width:360px;width:100%} .satir-hata .img{aspect-ratio:1;padding:0} .bos{display:grid;gap:var(--s3);justify-items:start;max-width:360px} .iskelet{display:grid;gap:var(--s2);width:160px} .iskelet i{display:block;background:var(--box-2);height:14px;animation:nab 1.4s ease-in-out infinite} .iskelet i:first-child{height:auto;aspect-ratio:1} .iskelet i.g80{width:80%}.iskelet i.g50{width:50%} @keyframes nab{50%{opacity:.5}} .durum{display:flex;flex-direction:column;gap:0;max-width:360px;width:100%;margin:0;padding:0} .durum li{list-style:none;display:grid;grid-template-columns:24px 1fr;gap:var(--s3);min-height:var(--h-link);align-items:center;font-size:var(--f-small);position:relative} .durum li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line-input);justify-self:center;background:var(--surface);z-index:1} .durum li.ok::before{background:var(--ink);border-color:var(--ink)} .durum li.su::before{border-color:var(--ink);box-shadow:0 0 0 4px var(--box-2)} .durum li.su{font-weight:700} .durum li:not(:last-child)::after{content:"";position:absolute;left:11px;top:28px;height:calc(100% - 12px);border-left:2px solid var(--line-2)} .durum li.iptal::before{background:var(--err);border-color:var(--err)} .durum li.iptal{color:var(--err);font-weight:700} .durum li.pasif{color:var(--ink-3);text-decoration:line-through} .cerez{width:100%;max-width:360px;border-top:2px solid var(--ink);padding:var(--s4) var(--gut);display:grid;gap:var(--s3);background:var(--surface)} .cerez .ucl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)} .cerez .ucl .btn{padding:0;font-size:var(--f-btn-k)} /* ödeme */ .adimlar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);width:100%;max-width:360px;padding:0;margin:0;list-style:none} .adimlar li{min-height:var(--h-link);display:flex;align-items:center;gap:var(--s2);font-size:var(--f-small);border-bottom:2px solid var(--line-input);color:var(--ink-2)} .adimlar li.ok{border-color:var(--ink);color:var(--ink)} .adimlar li[aria-current]{border-bottom-width:4px;border-color:var(--altin);color:var(--ink);font-weight:700} .ozet{width:100%;max-width:360px;border:1px solid var(--line-input);background:var(--surface)} .ozet summary{min-height:var(--h-btn);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:0 var(--s4);cursor:pointer;font-size:var(--f-small);font-weight:600;list-style:none} .ozet summary::-webkit-details-marker{display:none} .ozet summary::before{content:"▸";margin-right:var(--s1)}.ozet[open] summary::before{content:"▾"} .ozet summary span{flex:1} .ozet .ic,.ozet-kutu{padding:var(--s4);display:grid;gap:var(--s2);font-size:var(--f-small)} .ozet .sat,.ozet-kutu .sat{display:flex;justify-content:space-between;gap:var(--s3)} .ozet .top,.ozet-kutu .top{border-top:1px solid var(--line);padding-top:var(--s2);font-weight:700;color:var(--ink)} .ozet-kutu{width:100%;max-width:320px;border:1px solid var(--line-input);position:sticky;top:var(--s4)} .sepet-satir{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--s3);width:100%;max-width:360px;padding:var(--s4) 0;border-bottom:1px solid var(--line)} .sepet-satir .img{aspect-ratio:1;padding:0} .sepet-satir .eylem{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)} .sepet-satir .eylem .btn{min-height:44px;padding:0 var(--s2)} .guvence{width:100%;max-width:360px;display:grid;gap:var(--s2);padding:var(--s4);background:var(--calm);border-left:3px solid var(--altin);font-size:var(--f-small);color:var(--ink)} /* ürün galerisi (kit) */ .ugal{width:100%;max-width:392px;display:grid;gap:var(--s3)} .ugal .ana{position:relative} .ugal .ana .img{aspect-ratio:4/3} .ugal .ok-d{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid var(--btn2-kenar);background:var(--surface);border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:18px} .ugal .onceki{left:var(--s2)}.ugal .sonraki{right:var(--s2)} .ugal .fav{position:absolute;top:var(--s2);right:var(--s2);width:44px;height:44px;background:var(--surface)} .ugal .say-g{position:absolute;bottom:var(--s2);left:var(--s2);background:var(--surface);font-size:var(--f-small);font-weight:600;padding:2px var(--s2);font-variant-numeric:tabular-nums} .ugal .serit-k{display:flex;gap:var(--s2);overflow-x:auto;padding:2px} .ugal .serit-k button{flex:none;width:56px;height:56px;padding:0;border:1px solid var(--line);background:none;cursor:pointer} .ugal .serit-k button .img{width:100%;height:100%;padding:0} .ugal .serit-k button[aria-current="true"]{border:2px solid var(--ink)} /* ==== YARDIMCI SINIFLAR (satır içi stil yerine; en sonda, eşit özgüllükte kazanır) ==== */ .mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt5{margin-top:var(--s5)} .mb2{margin-bottom:var(--s2)} .olcu-34{max-width:34ch} .f-h1{font-size:var(--f-h1)} .odak-y55{object-position:50% 55%}.odak-y60{object-position:50% 60%} /* takım sayfası: yazı boyutları bir kademe düşürüldü (24.10): başlık h2 kademesi, fiyat ve bölüm başlıkları lead, kontroller ve listeler 14 px */ html[data-sayfa="takim"] .tk-bas h1{font-size:var(--f-h2)} html[data-sayfa="takim"] .tk-fiyat{font-size:var(--f-lead)} html[data-sayfa="takim"] main h2.h2,html[data-sayfa="takim"] .tk-icerik-d h2{font-size:var(--f-lead)} html[data-sayfa="takim"] .tk-al legend,html[data-sayfa="takim"] .tk-sec,html[data-sayfa="takim"] .tk-sec b,html[data-sayfa="takim"] .tk-icerik h2,html[data-sayfa="takim"] .tk-ozel h2,html[data-sayfa="takim"] .tk-tm h3{font-size:var(--f-small)} @media(min-width:1024px){html[data-sayfa="takim"] .tk-icerik-d li{font-size:var(--f-small)}} /* ==== HERO: yazısı görselin içinde olan slayt (masaüstünde kart yok; telefonda yazı tarafı görünsün diye sağa odaklı kırpılır, kart altta siyah zeminde) ==== */ .slayt-gorsel{background:var(--siyah);color:var(--yazi-ters)} .slayt-gorsel .foto img{object-position:75% 50%} .slayt-gorsel .kart{padding-bottom:var(--s6)} .slayt-gorsel .kart .etiket,.slayt-gorsel .kart .display,.slayt-gorsel .kart .lead{color:var(--yazi-ters)} .slayt-gorsel .kart .etiket::before{background:var(--altin-d)} html[data-hero="b"] .slayt-gorsel{min-height:0;flex-direction:column;align-items:stretch} html[data-hero="b"] .slayt-gorsel::after{display:none} html[data-hero="b"] .slayt-gorsel .foto{position:relative;aspect-ratio:4/3;height:auto} html[data-hero="b"] .slayt-gorsel .kart{padding:var(--s3) var(--gut) var(--s6)} @media(min-width:1024px){ .slayt-gorsel .foto img{object-position:50% 50%} .slayt-gorsel .kart{display:none} html[data-hero="b"] .slayt-gorsel{min-height:640px;flex-direction:row} html[data-hero="b"] .slayt-gorsel .foto{position:absolute;aspect-ratio:auto;height:100%} } /* ==== HERO B: sol kenarda geometrik filigran (alt köşe dolu, yukarı doğru seyrelir) (yalnız masaüstü; mağaza slaytında yok, kendi çizgisi var) ==== */ @media(min-width:1024px){ html[data-hero="b"] .slayt:not(.slayt-gorsel)::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:2;aspect-ratio:490/951;background:var(--desen-cizgi) left center/100% 100% no-repeat;opacity:.2;pointer-events:none} } /* ==== YERLEŞİM FİKİRLERİ (oda planlayıcı) ==== */ .yer-bas{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)} .yer{display:grid;gap:var(--s5);grid-template-areas:"adim" "sahne" "ekle" "sec" "son"} .yer-panel{display:contents} /* mobilde gruplar ızgaraya açılır: oda → plan → mobilya → seçili → paylaş */ .yer-adim{grid-area:adim}.yer-sahne{grid-area:sahne}.yer-ekle{grid-area:ekle}.yer-sec{grid-area:sec}.yer-son{grid-area:son} /* yer-panel bölümü (03.11.2026): numaralı grup, tek boşluk ritmi s3 iç / s5 gruplar arası, ince ayraç */ .yer-grup{display:flex;flex-direction:column;gap:var(--s3);align-items:stretch;min-width:0} .yer-grup+.yer-grup,.yer-sahne+.yer-panel>.yer-grup:first-child{padding-top:var(--s5);border-top:1px solid var(--line-2)} .yer-sec[hidden],.yer-eylem .btn[hidden],.cip-sayi[hidden]{display:none} .yer-baslik{display:flex;align-items:center;gap:var(--s2);font-size:var(--f-body);font-weight:600;line-height:1.3} .yer-no{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--isaret);color:var(--yazi-ters);font-size:var(--f-label);font-weight:700} .yer-alt{margin:0;font-size:var(--f-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .yer-iki{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);width:100%} .yer-iki .alan{max-width:none} .yer-cipler{display:flex;flex-wrap:wrap;gap:var(--s2)} .yer-cipler .cip{min-height:44px;gap:var(--s2);border-color:var(--cip-kenar);cursor:pointer;font:inherit;font-size:var(--f-small);font-weight:600;color:var(--ink)} .yer-cipler .cip[aria-pressed="true"]{background:var(--eylem);border-color:var(--eylem);color:var(--eylem-yazi)} .cip.ekle{border-style:dashed;background:transparent} .cip.ekle .ik{flex:none} .cip-sayi{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 var(--s1);border-radius:999px;background:var(--isaret);color:var(--yazi-ters);font-size:var(--f-label);font-weight:700} .yer-eylem{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s2)} .yer-eylem .btn{width:100%;min-height:44px;white-space:nowrap} .yer-uzak{margin:0;font-size:var(--f-label);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* aç/kapa ayarı: çipten ayrı dil (sol hizalı satır + anahtar izi), aria-pressed durum taşır */ .yer-anahtar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;min-height:44px;padding:0 var(--s1) 0 0;border:0;background:none;font:inherit;font-size:var(--f-small);font-weight:600;color:var(--ink);cursor:pointer;text-align:left} .yer-anahtar::after{content:"";flex:none;width:44px;height:26px;border-radius:999px;background:var(--line-input) radial-gradient(circle at 13px 50%,var(--beyaz) 9px,transparent 10px);transition:background-color var(--gecis-hizli) ease,background-position var(--gecis-hizli) ease} .yer-anahtar[aria-pressed="true"]::after{background:var(--eylem) radial-gradient(circle at 31px 50%,var(--beyaz) 9px,transparent 10px)} .yer-sahne{min-width:0;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);background:var(--calm);border:1px solid var(--line-2)} .yer-plan{display:block;width:100%;height:auto;max-height:72vh;user-select:none;-webkit-user-select:none} .yer-durum{padding:var(--s3) var(--s4);background:var(--ok-bg);color:var(--ok);font-size:var(--f-small)} .yer-durum.hata{background:var(--err-bg);color:var(--err)} .yer-ipucu{margin:0} .yer-plan .mob,.yer-plan .yer-tut{cursor:grab;touch-action:none} .yer-plan .mob.sel>rect{stroke:var(--ink);stroke-width:3} /* karyola kuşbakışı detayları (yerlesim.js karyolaDetay) */ .yer-kar-bas{fill:var(--ceviz);opacity:.7} .yer-kar-yatak{fill:var(--beyaz);opacity:.55} .yer-kar-yastik{fill:var(--beyaz);stroke:var(--line);stroke-width:1} .yer-kar-golge{fill:var(--ink);opacity:.12} .yer-kar-dikis{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;fill:none} .yer-sif-tabla{fill:var(--beyaz);opacity:.35} .yer-sif-on{stroke:var(--ink);stroke-width:1.5;opacity:.45;fill:none} .yer-sif-kulp{fill:var(--ceviz);opacity:.75} /* dolap kuşbakışı (yerlesim.js dolapDetay): gövde, ön kenarda kapaklar, ayrım çizgisi, kulp */ .yer-dol-zemin{fill:var(--keten);stroke:var(--ink-2);stroke-width:1.5} .yer-dol-govde{fill:var(--beyaz);opacity:.3} .yer-dol-kapak{fill:var(--beyaz);opacity:.55;stroke:var(--ink);stroke-width:1;stroke-opacity:.35} .yer-dol-ayrim{stroke:var(--ink);stroke-width:1;opacity:.35;fill:none} .yer-dol-kulp{fill:var(--ceviz);opacity:.8} .yer-tabure{pointer-events:none} /* kapı kanadı (03.11): menteşe (yerel 0,0) etrafında ara ara açılıp kapanır; dinlenmede kapalı. Hareket azaltmada açık durur */ .yer-kapi-kanat{transform-box:view-box;transform-origin:0 0;animation:yer-kapi-ac 8.4s ease-in-out infinite} .yer-kapi-kanat.ters{animation-name:yer-kapi-ac-ters} @keyframes yer-kapi-ac{0%,35%,100%{transform:rotate(-90deg)}14%,21%{transform:rotate(0deg)}} @keyframes yer-kapi-ac-ters{0%,35%,100%{transform:rotate(90deg)}14%,21%{transform:rotate(0deg)}} @media (prefers-reduced-motion:reduce){.yer-kapi-kanat{animation:none}} .yer-tabure-golge{fill:var(--ink);opacity:.12} .yer-tabure-govde{fill:var(--keten);stroke:var(--ceviz);stroke-width:1.5;stroke-opacity:.5} .yer-tabure-minder{fill:var(--pudra);opacity:.9} .yer-masa-tabla{fill:var(--beyaz);opacity:.35} .yer-masa-on{stroke:var(--ink);stroke-width:1.5;opacity:.45;fill:none} .yer-sandalye{pointer-events:none} .yer-sandalye-golge{fill:var(--ink);opacity:.12} .yer-sandalye-oturak{fill:var(--keten);stroke:var(--ceviz);stroke-width:1.5;stroke-opacity:.5} .yer-sandalye-sirt{fill:var(--ceviz);opacity:.6} .yer-kar-yorgan{fill:var(--bulut);opacity:.85} .yer-kar-kivrim{fill:var(--beyaz);opacity:.7} /* ranza merdiveni (09.11): ayak ucunda, uzun kenarda ray + basamaklar */ .yer-ranza-ray{fill:var(--ceviz);opacity:.55} .yer-ranza-basamak{stroke:var(--beyaz);stroke-width:2;fill:none} .yer-plan .mob.bad>rect{stroke:var(--err);stroke-width:3;fill-opacity:.75} .yer-plan .yer-kolon,.yer-plan .yer-tutamac{touch-action:none} .yer-plan .yer-kolon{cursor:grab;outline:none} /* çizgi yalnız içeride: geometriye kırpılır (genişlik 2×), değen kolonlar görsel olarak binmez */ .yer-kolon-gov{fill:var(--yer-kolon);stroke:var(--yer-kolon-cizgi);stroke-width:3;clip-path:inset(0) fill-box} .yer-kolon-tarama{stroke:var(--yer-kolon-cizgi);stroke-width:2} .yer-kolon-yazi{fill:var(--yer-kolon-yazi);font-weight:600} .yer-kolon.sel .yer-kolon-gov,.yer-kolon:focus-visible .yer-kolon-gov{stroke:var(--vurgu);stroke-width:8} .yer-kolon.uyari .yer-kolon-gov{stroke:var(--err);stroke-width:8} .yer-kolon.cakis .yer-kolon-gov{stroke:var(--err);stroke-width:8} .yer-kolon-dis{fill:var(--yer-kolon-cizgi);font-weight:700;paint-order:stroke;stroke:var(--beyaz);stroke-width:3px;stroke-linejoin:round} .yer-tutamac{cursor:nwse-resize} .yer-tutamac[data-y="n"],.yer-tutamac[data-y="s"]{cursor:ns-resize}.yer-tutamac[data-y="e"],.yer-tutamac[data-y="w"]{cursor:ew-resize} .yer-tutamac[data-y="ne"],.yer-tutamac[data-y="sw"]{cursor:nesw-resize} .yer-tutamac-alan{fill:transparent} .yer-tutamac-nokta{fill:var(--beyaz);stroke:var(--vurgu);stroke-width:2} @media(min-width:1024px){ .yer{grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:none;grid-template-rows:auto 1fr;align-items:start;column-gap:var(--s7);row-gap:0} .yer-panel{display:flex;flex-direction:column;gap:var(--s5);grid-column:1} .yer-panel+.yer-sahne+.yer-panel{grid-row:2;padding-top:var(--s5)} .yer-sahne{grid-column:2;grid-row:1/3} .yer-sahne+.yer-panel>.yer-grup:first-child{border-top:1px solid var(--line-2)} } /* ==== ODA PLANLAYICI ÇAĞRISI (ana sayfa bandı) ==== */ .yer-cta{display:grid;gap:var(--s5);align-items:center;padding:var(--s5) var(--s4);background:var(--calm);border:1px solid var(--line-2)} .yer-cta .ic{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)} .yer-cta .cizim{width:100%;max-width:320px;height:auto;color:var(--ink-2);justify-self:center} .yer-cta .m1{fill:var(--adacayi);stroke:var(--ink-2)}.yer-cta .m2{fill:var(--pudra);stroke:var(--ink-2)}.yer-cta .m3{fill:var(--bulut);stroke:var(--ink-2)} .yer-cta .kapi{fill:rgba(138,101,54,.18);stroke:var(--altin);stroke-dasharray:4 3}.yer-cta .pen{stroke:var(--altin);stroke-width:5;fill:none} @media(min-width:768px){.yer-cta{grid-template-columns:7fr 5fr;padding:var(--s6) var(--s7);gap:var(--s7)}} /* GÜVENDİĞİMİZ MARKALAR (önce sağlık alanı) */ .marka-blok{display:grid;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)} .marka-kayan{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--siyah) 12%,var(--siyah) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--siyah) 12%,var(--siyah) 88%,transparent)} .marka-liste{list-style:none;margin:0;padding:0 var(--s7) 0 0;display:flex;flex:none;align-items:center;gap:var(--s7);animation:marka-kay 40s linear infinite} @media(hover:hover){.marka-kayan:is(:hover,:focus-within) .marka-liste{animation-play-state:paused}} .marka-liste li{display:flex;align-items:center;justify-content:center;height:24px;flex:none} .marka-liste img{height:100%;width:auto;max-width:none;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s} @media(hover:hover){.marka-liste li:hover img{filter:none;opacity:1}} /* ISTISNA: odaklanamayan dekoratif logo */ @keyframes marka-kay{to{transform:translateX(-100%)}} @media (prefers-reduced-motion:reduce){.marka-kayan{overflow-x:auto}.marka-liste{animation:none}.marka-liste[aria-hidden]{display:none}} /* ===== v2 taslak (ana-sayfa-v2.html, 30.10.2026): serif başlık + italik vurgu, referans 8125 ===== */ .v-bas{font-family:var(--yazi-baslik);font-weight:400;font-size:calc(var(--f-display)*1.05);line-height:1.08;letter-spacing:-.01em;text-wrap:balance} .v-bas em{font-style:italic;color:var(--vurgu)} @media(min-width:1024px){.v-bas{font-size:calc(var(--f-display)*1.25)}} /* 02.11.2026: 1,5→1,25 (≈52px), mobil 1,15→1,05 */ .btn.btn-koyu:not(.p):not(.metin){background:var(--ink);border-color:var(--ink);color:var(--yazi-ters)} @media(hover:hover){.btn.btn-koyu:not(.p):not(.metin):not([disabled]):not(.pasif):is(:hover,:focus-visible){background:var(--siyah)}} /* üç sütun ilke */ .ilke3{background:var(--zemin-guven,var(--krom));padding-block:var(--rN)} .ilke3-bas{display:grid;gap:var(--s4);justify-items:center;text-align:center;max-width:720px;margin:0 auto var(--s7)} .ilke3-bas .lead{margin-inline:auto} .ilke3-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)} .ilke3-liste li{display:grid;gap:var(--s3);align-content:start;justify-items:start} .ilke3-liste h3{font-family:var(--yazi-baslik);font-weight:400;font-size:var(--f-h1);line-height:1.2} .ilke3-liste p{color:var(--ink-2);line-height:1.7} .ilke-ik{width:40px;height:40px;color:var(--isaret);margin-bottom:var(--s3)} @media(min-width:768px){.ilke3-liste{grid-template-columns:repeat(3,1fr);gap:0}.ilke3-liste li{padding-inline:var(--s6)}.ilke3-liste li+li{border-left:1px solid var(--line)}.ilke3-liste li:first-child{padding-left:0}} .ilke3 .marka-blok{margin-top:var(--s8)} /* .ilke3.satir (07.11.2026, Hakkımızda): numaralı satırlar; kolon yerine tam genişlik satır, sola hizalı başlık, CSS sayaç numara (--vurgu serif) */ .ilke3.satir .ilke3-bas{justify-items:start;text-align:left;margin:0 0 var(--s7);max-width:var(--olcu)} .ilke3.satir .ilke3-bas .lead{margin-inline:0} .ilke3.satir .ilke3-liste{counter-reset:ilke;gap:0;border-top:1px solid var(--line)} .ilke3.satir .ilke3-liste li{counter-increment:ilke;display:grid;gap:var(--s3);padding:var(--s6) 0;border-bottom:1px solid var(--line)} .ilke3.satir .ilke3-liste li::before{content:counter(ilke,decimal-leading-zero);font-family:var(--yazi-baslik);font-style:italic;font-weight:400;font-size:var(--f-h1);line-height:1;color:var(--vurgu)} .ilke3.satir .ilke3-liste p{max-width:var(--olcu)} .ilke3.satir .ilke3-liste h3{font-size:calc(var(--f-h1)*.95);line-height:1.2} @media(min-width:768px){.ilke3.satir .ilke3-liste{grid-template-columns:none}.ilke3.satir .ilke3-liste li{padding-inline:0;border-left:0}} @media(min-width:1024px){.ilke3.satir .ilke3-liste li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:var(--s8);row-gap:var(--s3);padding-block:var(--s7)}.ilke3.satir .ilke3-liste li::before{grid-column:1;grid-row:1;font-size:calc(var(--f-display)*1.25)}.ilke3.satir .ilke3-liste h3{grid-column:1;grid-row:2;font-size:var(--f-h1)}.ilke3.satir .ilke3-liste p{grid-column:2;grid-row:1/3;align-self:end}} /* 1966 miras */ .miras{background:var(--zemin-pudra);padding-block:var(--rF)} .miras-ic{display:grid;gap:var(--s7);align-items:center} .miras-yazi{display:grid;gap:var(--s4);justify-items:start} .miras-yil{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--kil);width:100%;max-width:420px} .miras-yil b{font-family:var(--yazi-baslik);font-weight:400;font-size:64px;line-height:1;color:var(--vurgu)} .miras-yil span{font-size:var(--f-small);color:var(--ink-2);line-height:1.6} .miras-foto{position:relative;margin:0 0 var(--s7)} .miras-foto>img{width:100%;aspect-ratio:16/10;object-fit:cover} .polaroid{position:absolute;right:var(--s3);bottom:calc(var(--s7)*-1);width:38%;background:var(--zemin-kart);padding:var(--s2) var(--s2) var(--s3);box-shadow:0 12px 30px rgba(43,39,35,.14)} .polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover} .polaroid span{display:block;margin-top:var(--s2);font-family:var(--yazi-baslik);font-style:italic;font-size:var(--f-lead);color:var(--ink-2)} @media(min-width:1024px){.miras-ic{grid-template-columns:5fr 7fr;gap:var(--s9)}.polaroid{right:calc(var(--s6)*-1);width:30%}} /* süreç adımları */ .surec{background:var(--zemin-surec,var(--krom));padding-block:var(--rN)} .surec-ic{display:grid;gap:var(--s7)} .surec-bas{display:grid;gap:var(--s5);justify-items:start;align-content:start} .surec-liste{list-style:none;margin:0;padding:0} .surec-liste li{display:flex;gap:var(--s5);padding-block:var(--s5);border-bottom:1px solid var(--line)} .surec-liste li:first-child{padding-top:0} .surec-liste .no{font-family:var(--yazi-baslik);font-style:italic;font-size:var(--f-h2);color:var(--isaret);min-width:2ch;line-height:1.3} .surec-liste h3{font-family:var(--yazi-baslik);font-weight:400;font-size:var(--f-h1);line-height:1.25} .surec-liste p{color:var(--ink-2);margin-top:var(--s1)} @media(min-width:1024px){.surec-ic{grid-template-columns:1fr 1fr;gap:var(--s9)}} /* Modoko ziyaret bandı */ .ziyaret{background:var(--zemin-tas);padding-block:var(--rN)} .ziyaret-ic{display:grid;gap:var(--s6);align-items:center} .ziyaret .v-bas em{color:var(--altin)} .ziyaret-sag{display:grid;gap:var(--s5);justify-items:start} .ziyaret-eylem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5)} .ziyaret-tel{font-size:var(--f-lead);color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;letter-spacing:.02em} @media(min-width:1024px){.ziyaret-ic{grid-template-columns:1fr 1fr;gap:var(--s9)}} .marka-kayan{padding-block:var(--s4)}.marka-liste li.m-rozet{height:56px} /* v2: tüm bölüm başlıkları serif (tutarlılık) */ main .h2{font-family:var(--yazi-baslik);font-weight:500;font-size:calc(var(--f-h2)*1.3);line-height:1.15;letter-spacing:0} /* takım vitrini */ .vitrin{background:var(--keten);padding-block:var(--rN)} .vitrin-bas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6)} .vitrin-bas>div:first-child{display:grid;gap:var(--s3)} .vt-sekme{display:flex;gap:var(--s1);overflow-x:auto} .vt-sekme button{font:inherit;font-size:var(--f-small);color:var(--ink-2);background:none;border:0;border-bottom:1px solid transparent;min-height:var(--h-link);padding:0 var(--s3);cursor:pointer} .vt-sekme button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)} .vt-liste{list-style:none;margin:0 calc(var(--gut)*-1);padding:0 var(--gut);display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)} .vt-liste li{position:relative;flex:0 0 78%;scroll-snap-align:start} .vt-kart{display:grid;gap:var(--s1);color:inherit;text-decoration:none} .vt-foto{aspect-ratio:4/5;overflow:hidden;background:var(--calm);margin-bottom:var(--s3)} .vt-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--gecis) ease} @media(hover:hover){.vt-kart:is(:hover,:focus-visible) .vt-foto img{transform:scale(var(--hover-olcek))}} .vt-tur{font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .vt-kart h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1);line-height:1.2} .vt-ic{font-size:var(--f-small);color:var(--ink-2)} .vt-alt{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s2)} .vt-alt b{font-weight:600} .vt-kalp{position:absolute;top:var(--s3);right:var(--s3);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;cursor:pointer} .vt-kalp svg{width:20px;height:20px} .vitrin-dip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--kil)} @media(min-width:1024px){.vt-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);overflow:visible;margin:0;padding:0}.vt-liste li{flex:none}} /* yorumlar altında teslim fotoğrafları */ .yorum-foto{grid-column:1/-1;display:grid;gap:var(--s4)} .yorum-foto ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .yorum-foto img{width:100%;aspect-ratio:1;object-fit:cover} .surec-liste .lnk{margin-top:var(--s1)} .alt-bilgi.rF{margin-top:0} .vt-alt b{white-space:nowrap} /* v2 revize 30.10: başlık boyları, bölüm geçişleri */ .ilke3-liste h3{font-size:22px;white-space:nowrap} @media(max-width:767px){.ilke3-liste h3{white-space:normal}} .vt-kart h3{font-size:22px} .vitrin-dip{justify-content:flex-end} :is(.vitrin,.miras){margin-top:0} .vt-liste li{min-width:0}.vt-alt{flex-wrap:wrap} /* vitrin kartı v2.1 (ekip ortak önerisi, 30.10.2026) */ .vt-kart{display:flex;flex-direction:column;height:100%;gap:var(--s1)} .vt-ic{flex:1} .vt-fiyat{font-size:var(--f-lead);font-weight:700;margin-top:var(--s3);font-variant-numeric:tabular-nums} .vt-not{font-size:var(--f-label);color:var(--ink-2)} .vt-btn{margin-top:var(--s4);width:100%} /* kart üstünde: düğme kitteki kendi soldan dolgusunu yapar (ayrı siyah boyama kaldırıldı) */ @media(hover:hover){.vt-kart:is(:hover,:focus-visible) .vt-btn{background-size:100% 100%;color:var(--yazi-ters)}} /* bebek odası v2 */ .ur-renk{display:flex;align-items:center;gap:6px;margin-top:var(--s1);font-size:var(--f-label);color:var(--ink-2)} .ur-renk i{width:12px;height:12px;border-radius:50%;background:var(--r);border:1px solid var(--line)} .ur-renk span{margin-left:2px} .kat-ur h3{font-family:var(--yazi-baslik);font-weight:500;font-size:20px} .vitrin+.ilke3{margin-top:0} /* bebek odası v2.1: sade kategori (neden + çağrı) */ .neden{background:var(--krom);padding-block:var(--rN)} .neden-ic{display:grid;gap:var(--s7)} .neden-sol{display:grid;gap:var(--s4);align-content:start} .neden-liste{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s5)} .neden-liste li{display:flex;gap:var(--s4);align-items:flex-start} .neden-liste .ilke-ik{flex:none;margin:0} .neden-liste h3{font-family:var(--yazi-baslik);font-weight:500;font-size:22px;line-height:1.2} .neden-liste p{color:var(--ink-2);margin-top:var(--s1)} @media(min-width:1024px){.neden-ic{grid-template-columns:1fr 1fr;gap:var(--s9)}} .kat-cagri{display:grid;gap:var(--s5);padding:var(--s7) var(--s5);background:var(--zemin-pudra)} .kat-cagri .lead{margin-top:var(--s3)} @media(min-width:1024px){.kat-cagri{grid-template-columns:3fr 2fr;align-items:center;padding:var(--s8)}.kat-cagri .ziyaret-eylem{justify-content:flex-end}} /* bebek odası v2.2: GPT tasarımıyla birleşik (30.10.2026) */ .kat-giris{display:grid;gap:var(--s6);padding-top:var(--s5)} .kat-giris-ust{display:grid;gap:var(--s4)} @media(min-width:1024px){.kat-giris-ust{grid-template-columns:3fr 2fr;align-items:end;gap:var(--s9)}} .oda-sahne{display:grid;gap:0;background:var(--zemin-pudra)} .oda-foto{position:relative;margin:0} .oda-foto img{width:100%;aspect-ratio:4/3;object-fit:cover} .oda-foto figcaption{position:absolute;top:var(--s3);left:var(--s3);background:rgba(255,255,255,.9);font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;padding:var(--s1) var(--s2)} .oda-panel{display:grid;gap:var(--s5);padding:var(--s5);align-content:start} .oda-panel #oda-acik{color:var(--ink-2);margin-top:var(--s2)} .oda-secenek{display:grid;gap:var(--s2)} .oda-sec{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:var(--s3);padding:var(--s2);background:transparent;border:0;border-bottom:1px solid var(--kil);text-align:left;font:inherit;color:var(--ink);cursor:pointer;min-height:var(--h-link)} .oda-sec img{width:56px;height:42px;object-fit:cover} .oda-sec span{display:grid;font-weight:600} .oda-sec small{font-weight:400;font-size:var(--f-small);color:var(--ink-2)} .oda-sec[aria-pressed="true"]{background:var(--zemin-kart)} .oda-eylem{display:grid;gap:var(--s2)} @media(min-width:1024px){.oda-sahne{grid-template-columns:2fr 1fr}.oda-foto img{height:100%;aspect-ratio:auto;min-height:520px}.oda-panel{padding:var(--s6)}} .kol-liste{list-style:none;margin:0 calc(var(--gut)*-1);padding:0 var(--gut);display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)} .kol-liste>li{flex:0 0 82%;scroll-snap-align:start;min-width:0} @media(min-width:1024px){.kol-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin:0;padding:0;overflow:visible}} .kol-kart{display:flex;flex-direction:column;gap:var(--s2);height:100%} .kol-foto{position:relative;display:block;overflow:hidden;margin-bottom:var(--s2)} .kol-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--gecis) ease} @media(hover:hover){.kol-foto:is(:hover,:focus-visible) img{transform:scale(var(--hover-olcek))}} .kol-foto span{position:absolute;left:var(--s3);bottom:var(--s3);background:rgba(255,255,255,.92);color:var(--ink);font-size:var(--f-small);padding:var(--s1) var(--s3)} .kol-ad{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .kol-ad h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h2);line-height:1.1} .kol-ad .ur-renk{margin:0} .kol-acik{color:var(--ink-2)} .kol-parca{font-size:var(--f-small);padding-top:var(--s3);border-top:1px solid var(--kil);margin-top:auto} .kol-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)} .kol-alt p{display:grid} .kol-alt b{font-size:var(--f-lead);font-variant-numeric:tabular-nums;white-space:nowrap} .kol-alt p span{font-size:var(--f-label);color:var(--ink-2)} .kol-parca-bag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--kil);color:var(--ink-2)} .planla{background:var(--krom);padding-block:var(--rN)} .planla-ic{display:grid;gap:var(--s7);align-items:center} .planla-yazi{display:grid;gap:var(--s4);justify-items:start} @media(min-width:1024px){.planla-ic{grid-template-columns:1fr 1fr;gap:var(--s9)}} .plan-kagit{margin:0;background:var(--zemin-kart);padding:var(--s5);box-shadow:0 12px 30px rgba(43,39,35,.08);display:grid;gap:var(--s3)} .plan-kagit figcaption{display:flex;justify-content:space-between;font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .plan-kagit svg{width:100%;height:auto} .plan-kagit text{font-size:13px;fill:var(--ink-2);text-anchor:middle;font-family:var(--yazi-baslik);font-style:italic} .plan-kagit p{font-family:var(--yazi-baslik);font-style:italic;font-size:var(--f-lead);color:var(--ink-2)} .pk-duvar{fill:none;stroke:var(--ink);stroke-width:4} .pk-pencere{stroke:var(--altin-o);stroke-width:6} .pk-kapi{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 4} .pk-mob{stroke:var(--ink-2);stroke-width:1} .pk-a{fill:var(--adacayi)}.pk-b{fill:var(--pudra)}.pk-c{fill:var(--keten)} .pk-oyun{fill:none;stroke:var(--altin-o);stroke-dasharray:3 5} .bakim-ic{display:grid;gap:var(--s6);align-items:start} .bakim-foto{margin:0} .bakim-foto img{width:100%;aspect-ratio:4/3;object-fit:cover} .bakim-foto figcaption{font-family:var(--yazi-baslik);font-style:italic;font-size:var(--f-lead);color:var(--ink-2);margin-top:var(--s3)} .akordeon summary b{font-weight:400;color:var(--altin)} @media(min-width:1024px){.bakim-ic{grid-template-columns:1fr 1fr;gap:var(--s8)}} .sss-son{display:grid;gap:var(--s6);padding-block:var(--s7);border-top:1px solid var(--line)} .sss-sol{display:grid;gap:var(--s4);align-content:start;justify-items:start} @media(min-width:1024px){.sss-son{grid-template-columns:2fr 3fr;gap:var(--s9)}} .kat-giris h1.v-bas{font-size:calc(var(--f-display)*1.15)} .planla .onay-liste{grid-template-columns:1fr;gap:var(--s2)}.planla .onay-liste li::before{content:"—";color:var(--altin);margin-right:var(--s2)} /* bebek odası v2.3 (31.10.2026): çip şeridi, tek açılır akordeon, SSS süreç görünümü */ .kat-arac{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5)} .kat-cip{display:flex;gap:var(--s1);overflow-x:auto;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);max-width:calc(100% + var(--gut)*2);scrollbar-width:none} .kat-cip .kat-fc{flex:none;background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:0 var(--s3);min-height:var(--h-link);font:inherit;font-size:var(--f-small);color:var(--ink-2);cursor:pointer} .kat-cip .kat-fc[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)} .kat-arac-sag{display:flex;align-items:center;gap:var(--s3)} .kat-arac-sag .kat-sayi{font-size:var(--f-small);color:var(--ink-2);margin:0} @media(min-width:1024px){.kat-cip{margin:0;padding:0;max-width:none}} .bakim-ak details[open] summary b,.sss-liste details[open] summary b{transform:rotate(45deg)} .bakim-ak summary b,.sss-liste summary b{display:inline-block;transition:transform .2s ease} .sss-son{background:var(--zemin-sss,var(--krom));padding-block:var(--rN);border:0} .sss-ic{display:grid;gap:var(--s7)} @media(min-width:1024px){.sss-ic{grid-template-columns:1fr 1fr;gap:var(--s9)}} .sss-son .sss-sol{display:grid;gap:var(--s5);justify-items:start;align-content:start} .sss-liste details{border-bottom:1px solid var(--line)} .sss-liste summary{display:flex;align-items:baseline;gap:var(--s5);padding-block:var(--s5);cursor:pointer;list-style:none} .sss-liste summary::-webkit-details-marker{display:none} .sss-liste .no{font-family:var(--yazi-baslik);font-style:italic;font-size:var(--f-h2);color:var(--altin);min-width:2ch} .sss-liste .soru{flex:1;font-family:var(--yazi-baslik);font-size:var(--f-h1);line-height:1.25} .sss-liste summary b{font-weight:400;color:var(--altin);font-size:22px} .sss-liste details p{color:var(--ink-2);padding:0 0 var(--s5) calc(2ch + var(--s5) + 6px);margin-top:calc(var(--s3)*-1)} .sss-son{display:block} .kat-cip{border:0;background:none;border-radius:0} .kat-cip .kat-fc{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;box-shadow:none} .kat-cip .kat-fc[aria-pressed="true"]{background:none;color:var(--ink);border-bottom-color:var(--ink)} .kat-hero{margin-top:var(--s3)} /* GPT raporu 31.10: mobil filtre çubuğu sabit, plan çizimi ince */ @media(max-width:767px){.kat-arac-sag{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:var(--s2)}.kat-arac-sag .kat-sayi{grid-column:1/-1}.kat-arac-sag>*{min-width:0}.kat-arac-sag .btn,.kat-arac-sag .kat-sec{width:100%}} .pk-duvar{stroke:var(--ink-2);stroke-width:2} .pk-kapi{stroke:var(--ink);stroke-width:1.5} /* ekip UX testi revizeleri (31.10.2026) */ .kat-ur .kat-foto{position:relative} .kat-ur .kat-yt{display:grid;place-items:center;align-content:center;gap:var(--s2);color:var(--ink-2);font-size:var(--f-label);letter-spacing:.06em;text-transform:uppercase} .kat-ur .kat-yt::before{content:"";width:28px;height:22px;border:1.5px solid currentColor;border-radius:3px;opacity:.6} .kat-ur .kat-yt::after{content:"Fotoğraf yakında"} .ur-bag{display:inline-flex;gap:4px;margin-top:var(--s1);font-size:var(--f-small);font-weight:600;color:var(--ink);border-bottom:1px solid var(--altin-o);width:fit-content} .kol-sayac{display:none;text-align:center;margin-top:var(--s3);font-size:var(--f-small);color:var(--ink-2);font-variant-numeric:tabular-nums} @media(max-width:1023px){.kol-sayac{display:block}} .kat-arac-sag .kat-sec select{width:100%} @media(max-width:1023px){.kat-cip{-webkit-mask-image:linear-gradient(90deg,var(--siyah) 85%,transparent);mask-image:linear-gradient(90deg,var(--siyah) 85%,transparent)}} @media(max-width:1023px){.planla-ic{justify-items:start}.planla-yazi{display:contents}.plan-kagit{order:5;width:100%}.planla .ziyaret-eylem{order:6}.planla-yazi>.kucuk{order:7}} /* ana sayfa v2: 3. bantta SVG zemini metin alanına yayılır */ .bant.svg-zemin{background:var(--svg-zemin)} .bant.svg-zemin .b-foto{background:var(--svg-zemin)} /* Forest takım sayfası v2 (31.10.2026) */ img.tk-kare{width:100%;height:100%;object-fit:cover} .tk-kucukler button img{width:100%;height:100%;object-fit:cover;display:block} .tk-yakinda{display:grid;place-items:center;align-content:center;gap:var(--s2);background:var(--keten);color:var(--ink-2);font-size:var(--f-label);letter-spacing:.06em;text-transform:uppercase} .tk-kare.tk-yakinda::before{content:"";width:36px;height:28px;border:1.5px solid currentColor;border-radius:3px;opacity:.6} .tk-kare.tk-yakinda::after{content:"Fotoğraf yakında"} .tk-kucukler span.tk-yakinda{display:block;width:100%;height:100%} .tk-bas{display:grid;gap:var(--s2)} html[data-sayfa="takim"] .tk-bas h1{font-size:calc(var(--f-display)*1.1);line-height:1.05} .tk-bas h1 em{font-style:italic;color:var(--vurgu)} .tk-karakter{font-family:var(--yazi-baslik);font-style:italic;font-size:var(--f-lead);color:var(--ink-2);line-height:1.35} .tk-bakim{display:grid;gap:var(--s4)} .tk-bakim .v-bas,.tk-kucuk-bas{font-size:calc(var(--f-display)*.9)} .tk-bakim .akordeon dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4);margin:0 0 var(--s2)} .tk-bakim .akordeon dd{margin:0;color:var(--ink-2)} .tk-tm .tk-yt{display:grid;place-items:center;font-size:var(--f-label);color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase} .tk-tm .tk-yt::after{content:"Fotoğraf yakında";text-align:center;padding:var(--s2)} /* Forest v3 (31.10.2026): ekip + GPT birleşik */ .tk-dahil ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .tk-dahil li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-block:var(--s3);border-bottom:1px solid var(--line)} .tk-dahil li span:first-child{display:grid} .tk-dahil small{color:var(--ink-2);font-size:var(--f-small)} .tk-dahil-e{display:inline-flex;align-items:center;gap:4px;font-size:var(--f-label);color:var(--ok);white-space:nowrap} .tk-dahil-e svg{width:14px;height:14px} .tk-dahil .lnk{margin-top:var(--s2)} .tk-renk-not{font-size:var(--f-small);color:var(--ink-2);margin-top:var(--s2)} .pk-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)} @media(min-width:768px){.pk-liste{grid-template-columns:repeat(3,1fr)}} .pk-kart{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s4);border-bottom:1px solid var(--line)} .pk-sema{width:100%;height:auto;background:var(--keten);padding:var(--s4);margin-bottom:var(--s3)} .pk-sema text{font-size:11px;fill:var(--ink-2);text-anchor:middle;font-family:var(--yazi)} .sm-gov{fill:var(--beyaz);stroke:var(--ink-2);stroke-width:1.2} .sm-ic{stroke:var(--ink-4);stroke-width:1;fill:none} .sm-kulp{stroke:var(--altin-o);stroke-width:2;stroke-linecap:round} .sm-olcu{stroke:var(--ink-4);stroke-width:1;fill:none} .pk-ust{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)} .pk-ust h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1)} .pk-fiyat{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .pk-olcu{font-size:var(--f-small)} .pk-not{font-size:var(--f-small);color:var(--ink-2);flex:1} .pk-kart .btn{align-self:flex-start;margin-top:var(--s2)} .pk-dip{margin-top:var(--s4)} .tk-karakter-b{background:var(--zemin-pudra);padding-block:var(--rN)} .kr-ic{display:grid;gap:var(--s6);align-items:center} .kr-foto{margin:0} .kr-foto img{width:100%;aspect-ratio:4/3;object-fit:cover} .kr-yazi{display:grid;gap:var(--s4)} @media(min-width:1024px){.kr-ic{grid-template-columns:1fr 1fr;gap:var(--s9)}} .tk-tamamla .tk-tam{max-width:720px} /* tam ekran galeri */ #tk-sahne img.tk-kare{cursor:zoom-in} .gb{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:rgba(20,18,16,.96);color:var(--yazi-ters)} .gb[open]{display:grid;grid-template-rows:1fr auto} .gb::backdrop{background:rgba(20,18,16,.96)} html.gb-acik{overflow:hidden} .gb-kapat{position:absolute;top:calc(var(--s3) + env(safe-area-inset-top,0px));right:var(--s3);z-index:2;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--yazi-ters);font-size:28px;line-height:1;cursor:pointer} .gb-sahne{position:relative;display:grid;place-items:center;min-height:0;padding:var(--s7) var(--s3) var(--s3)} .gb-resim{max-width:100%;max-height:100%;object-fit:contain;user-select:none} .gb-ok{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:var(--yazi-ters);display:grid;place-items:center;cursor:pointer} .gb-ok svg{width:26px;height:26px} .gb-ok.g{left:var(--s3)}.gb-ok.i{right:var(--s3)} @media(hover:hover){.gb-ok:is(:hover,:focus-visible),.gb-kapat:is(:hover,:focus-visible){background:rgba(255,255,255,.26)}} .gb-sayac{position:absolute;bottom:var(--s3);left:50%;transform:translateX(-50%);font-size:var(--f-small);color:rgba(255,255,255,.8)} .gb-onizleme{display:flex;gap:var(--s2);justify-content:center;overflow-x:auto;padding:var(--s3) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom,0px))} .gb-onizleme button{flex:none;width:88px;height:64px;padding:0;border:2px solid transparent;background:none;opacity:.55;cursor:pointer} .gb-onizleme button[aria-current="true"]{border-color:var(--beyaz);opacity:1} .gb-onizleme img{width:100%;height:100%;object-fit:cover;display:block} /* Forest v3 revize: sade başlık, panelde ek ürünler */ html[data-sayfa="takim"] .tk-bas h1{font-size:calc(var(--f-display)*1.05)} .tk-fiyat-satir{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)} .tk-fiyat-satir .tk-fiyat{margin:0} .tk-avantaj{font-size:var(--f-label);font-weight:600;color:var(--ok);background:var(--ok-bg);padding:4px var(--s2);border-radius:999px} .tk-ek{border-top:1px solid var(--line);padding-top:var(--s3)} .tk-ek-bas{font-size:var(--f-small);font-weight:600;margin-bottom:var(--s1)} .tk-ek-liste{list-style:none;margin:0;padding:0} .tk-ek-liste li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line-2)} .tk-ek-liste h3{font-size:var(--f-small);font-weight:400} .tk-ek-liste p{font-size:var(--f-small);color:var(--ink-2);font-variant-numeric:tabular-nums} .tk-ek-liste .btn{min-height:36px;padding:0 var(--s3);font-size:var(--f-small)} .tk-ek-liste .btn[aria-pressed="true"]{background:var(--ink);color:var(--yazi-ters);border-color:var(--ink)} /* Forest v3: yarı saydam galeri, filigran, benzer ürünler */ .gb{background:transparent} .gb::backdrop{background:rgba(20,18,16,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .gb-sahne{padding:var(--s8) var(--s9) var(--s3)} @media(max-width:767px){.gb-sahne{padding:var(--s8) var(--s3) var(--s3)}} .gb-cerceve{position:relative;display:inline-block;max-width:100%;max-height:100%} .gb-cerceve .gb-resim{display:block;max-width:min(1200px,100%);max-height:calc(100dvh - 200px);box-shadow:0 20px 60px rgba(0,0,0,.35)} .gb-onizleme{background:transparent} /* filigran: görsel üstüne İcan's logosu (yalnız caydırıcı; kaynak dosyaya da gömülmeli) */ .filigran{position:relative} .filigran::after{content:"";position:absolute;inset:0;background:url("../gorsel/marka/filigran-logo.png") center/28% auto no-repeat;opacity:.7;pointer-events:none;z-index:1} .tk-sahne.filigran::after{z-index:1} .tk-sahne .tk-gal-ok,.tk-sahne .tk-sayac,.tk-sahne .tk-fav-ik{z-index:2} .kol-uc>li{flex-basis:82%} @media(min-width:1024px){.kol-liste.kol-uc{grid-template-columns:repeat(3,1fr)}} /* Proje sayfası (projeler-bebek-odasi.html, 31.10.2026): özel proje şablonu */ .pj-guven{list-style:none;margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--f-small);color:var(--ink-2)} .pj-guven li::before{content:"";display:inline-block;width:5px;height:5px;margin-right:var(--s2);border-radius:50%;background:var(--altin-o);vertical-align:middle} .pj-ozet{display:grid;gap:var(--s6)} .pj-tanim{font-family:var(--yazi-baslik);font-size:calc(var(--f-lead)*1.15);line-height:1.5;color:var(--ink);max-width:62ch} .pj-dl{display:grid;gap:0;margin:0} .pj-dl>div{display:grid;gap:var(--s1);padding-block:var(--s3);border-top:1px solid var(--line)} .pj-dl dt{font-size:var(--f-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--altin)} .pj-dl dd{margin:0;color:var(--ink-2)} @media(min-width:768px){.pj-dl{grid-template-columns:repeat(4,1fr);gap:var(--s5)}} .ilke3-beyaz{background:var(--surface)} .ilke3-liste.alti{row-gap:var(--s6)} @media(min-width:768px){.ilke3-liste.alti{row-gap:var(--s7)}.ilke3-liste.alti li:nth-child(3n+1){border-left:0;padding-left:0}.ilke3-liste.alti li:nth-child(n+4){padding-top:0}} .pj-projeler{background:var(--zemin-pudra);padding-block:var(--rN)} .pj-proje{display:grid;gap:var(--s5);padding-block:var(--s7);border-top:1px solid var(--kil)} .pj-galeri{display:grid;gap:var(--s2);min-width:0} .pj-ana-k{display:block} .pj-ana{width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in;background:var(--keten)} .pj-kucuk{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s2)} .pj-kucuk img{width:100%;aspect-ratio:1;object-fit:cover;cursor:zoom-in;background:var(--keten)} .pj-yazi{display:grid;gap:var(--s3);align-content:center;justify-items:start} .pj-yazi h3{font-family:var(--yazi-baslik);font-weight:500;font-size:calc(var(--f-h1)*1.2);line-height:1.15} .pj-yazi p:not(.etiket){color:var(--ink-2);line-height:1.7;max-width:52ch} .pj-etiket{list-style:none;margin:var(--s2) 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)} .pj-etiket li{font-size:var(--f-label);padding:4px var(--s3);border:1px solid var(--cip-kenar);border-radius:999px;color:var(--ink-2);background:rgba(255,255,255,.55)} @media(min-width:1024px){.pj-proje{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center}.pj-proje:nth-of-type(even) .pj-galeri{order:2}.pj-yazi{padding-inline:var(--s5)}} .pj-beceri-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)} @media(min-width:1024px){.pj-beceri-liste{grid-template-columns:repeat(3,1fr);gap:var(--s6) var(--s5)}} .pj-beceri-liste figure{margin:0;display:grid;gap:var(--s2)} .pj-beceri-liste img{width:100%;aspect-ratio:4/3;object-fit:cover} .pj-beceri-liste h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1);line-height:1.2} .pj-beceri-liste p{font-size:var(--f-small);color:var(--ink-2)} .pj-op-ust{object-position:50% 20%}.pj-op-orta{object-position:50% 50%}.pj-op-alt{object-position:50% 80%} .pj-diger{background:var(--zemin-diger,var(--keten));padding-block:var(--rN)} .pj-diger-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)} @media(min-width:768px){.pj-diger-liste{grid-template-columns:repeat(3,1fr);gap:var(--s5)}} .pj-diger-liste a{display:grid;gap:var(--s2);color:inherit;text-decoration:none} .pj-diger-liste img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-kart,0);transition:transform var(--gecis) ease} @media(hover:hover){.pj-diger-liste a:is(:hover,:focus-visible) img{transform:scale(var(--hover-olcek))}} .pj-diger-liste h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1)} .pj-diger-liste p{color:var(--ink-2);font-size:var(--f-small)} .pj-hazir{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--kil);color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)} @media(min-width:1024px){html[data-sayfa="proje"] .yorum-duzen .yorumlar figure:first-child{grid-column:auto}html[data-sayfa="proje"] .yorum-duzen .yorumlar figure:first-child blockquote{font-size:var(--f-body)}} @media(max-width:767px){.pj-beceri-liste h3{font-size:20px}.pj-diger-liste h3{font-size:22px}} /* Proje sayfası v2 (31.10.2026): GPT hero, sekmeli vurgu, detay seçici + bizim kanıt katmanı */ .pj-hero{display:grid;background:var(--zemin-hero,var(--keten))} /* hero çizgi deseni (Ali 07.11.2026): ana sayfa slider'ının geometrik çizgileri, maske olarak; renk temadan (--isaret-acik), hareketsiz. Yükseklik = hero yüksekliği, genişlik orantılı (sol kenar); metnin altında, fotoğrafın altında kalır. */ .pj-hero{position:relative;isolation:isolate} .pj-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--desen-renk,var(--isaret-acik));-webkit-mask:var(--desen-cizgi) left bottom/auto 100% no-repeat;mask:var(--desen-cizgi) left bottom/auto 100% no-repeat;opacity:var(--desen-saydam,.5);pointer-events:none} @media(max-width:1023px){.pj-hero{--desen-saydam:.18}} /* mobilde desen metnin altında: okunurluk (Olcay 09.11.2026) */ .pj-hero-ic{display:grid;gap:var(--s4);align-content:center;justify-items:start;padding:var(--s7) var(--gut)} .pj-hero-foto{position:relative;margin:0;min-height:340px} .pj-hero-foto img{display:block;width:100%;height:100%;object-fit:cover} .pj-hero-foto figcaption{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);background:rgba(255,255,255,.92);padding:var(--s2) var(--s4);font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase} .pj-hero-foto .lnk{min-height:36px;letter-spacing:0;text-transform:none;font-size:var(--f-small)} .pj-hero-foto>a{display:block;height:100%} .pj-hero .kat-eylem{flex-wrap:nowrap;width:100%} .pj-hero .kat-eylem .btn{min-width:0;flex:1 1 0;padding-inline:var(--s3);text-align:center} @media(min-width:1024px){.pj-hero{grid-template-columns:6fr 5fr;align-items:center}.pj-hero-ic{padding:var(--s8) var(--s7) var(--s8) max(var(--s8),calc((100vw - 1080px)/2))}.pj-hero-foto{margin:var(--s7) max(var(--gut),calc((100vw - 1216px)/2)) var(--s7) 0;min-height:0;aspect-ratio:4/3}.pj-hero .kat-eylem .btn{flex:0 1 auto;padding-inline:var(--s5)}} .pj-alt{font-size:var(--f-small);letter-spacing:.04em;color:var(--altin);font-weight:600} .pj-yakin-ic{display:grid;gap:var(--s6);align-items:center} .pj-yakin-yazi{display:grid;gap:var(--s4);align-content:center;justify-items:start} .pj-yakin-foto{margin:0} .pj-yakin-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .pj-sekme{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);width:100%} .pj-sekme [role="tab"]{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:var(--h-link);padding:0 var(--s4);font:inherit;font-size:var(--f-small);color:var(--ink-2);cursor:pointer} .pj-sekme [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600} .pj-sekme-panel{display:grid;gap:var(--s2);justify-items:start} .pj-sekme-panel[hidden]{display:none} .pj-sekme-panel h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1);line-height:1.2} .pj-sekme-panel p{color:var(--ink-2);line-height:1.7;max-width:48ch} @media(min-width:1024px){.pj-yakin-ic{grid-template-columns:5fr 7fr;gap:var(--s8)}} .pj-detay{background:var(--keten);padding-block:var(--rN)} .pj-detay-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)} @media(min-width:768px){.pj-detay-liste{grid-template-columns:repeat(3,1fr)}} @media(min-width:1024px){.pj-detay-liste{gap:var(--s5)}} .pj-dt{position:relative;display:grid;width:100%;padding:0;text-align:left;background:var(--zemin-kart);border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer} .pj-dt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .pj-dt-alt{display:grid;gap:2px;padding:var(--s3) var(--s4) var(--s4)} .pj-dt-ad{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h2);line-height:1.2} .pj-dt-not{font-size:var(--f-small);color:var(--ink-2)} .pj-dt-isaret{position:absolute;top:var(--s2);right:var(--s2);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);font-size:18px} .pj-dt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .pj-dt[aria-pressed="true"] .pj-dt-isaret{background:var(--ink);color:var(--yazi-ters)} .pj-detay-ozet{display:grid;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--kil)} .pj-detay-ozet p{color:var(--ink-2)} @media(max-width:767px){.pj-dt-ad{font-size:18px}} /* Proje sayfası v2.1 (GPT raporu 31.10): mobil hero, seçki, çözüm satırı, seçim özeti */ .pj-sonraki{color:var(--ink-2);margin-top:calc(var(--s2)*-1)} .pj-cozum{font-size:var(--f-small);color:var(--ink);background:rgba(255,255,255,.6);border-left:2px solid var(--altin-o);padding:var(--s2) var(--s3);line-height:1.6} .pj-cozum b{display:block;font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--altin);margin-bottom:2px} .pj-proje,#teslim,.pj-yakin-bas{scroll-margin-top:96px} .pj-yakin-bas{margin-top:var(--s7)} .pj-secki{list-style:none;margin:0 calc(var(--gut)*-1);padding:0 var(--gut);display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)} .pj-secki li{flex:0 0 68%;scroll-snap-align:start;min-width:0} .pj-secki a{display:grid;gap:2px;color:inherit;text-decoration:none} .pj-secki img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:var(--s2);transition:transform var(--gecis) ease} @media(hover:hover){.pj-secki a:is(:hover,:focus-visible) img{transform:scale(var(--hover-olcek))}} .pj-secki-no{font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--altin);font-weight:600} .pj-secki-ad{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1);line-height:1.15} .pj-secki-alt{font-size:var(--f-small);color:var(--ink-2)} @media(min-width:768px){.pj-secki li{flex-basis:32%}} @media(min-width:1024px){.pj-secki{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin:0;padding:0;overflow:visible}.pj-secki li{flex:none}} .pj-detay-sayac{display:none} @media(max-width:1023px){ .pj-hero-foto{order:-1;min-height:0;aspect-ratio:4/3} .pj-hero-ic{padding-block:var(--s5)} .pj-guven li:nth-child(n+3){display:none} .pj-guven{margin-top:var(--s3);padding-top:var(--s3)} .pj-ana{aspect-ratio:4/3} .pj-detay-sayac:not([hidden]){display:block;position:sticky;bottom:calc(var(--h-cubuk) + env(safe-area-inset-bottom,0px) + var(--s3));z-index:3;margin-top:var(--s3);text-align:center} .pj-detay-sayac a{display:inline-block;background:var(--ink);color:var(--yazi-ters);text-decoration:none;font-size:var(--f-small);padding:var(--s3) var(--s4);min-height:44px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.2)} } .pj-detay-not{max-width:60ch} /* Detay seçici görselsiz kart (01.11.2026, ONAY BEKLİYOR): galeriyle aynı fotoğrafı tekrar etmemek için img'siz kullanım; işaret yazının üstüne binmesin */ .pj-dt:not(:has(img)) .pj-dt-alt{padding:var(--s4) 56px var(--s4) var(--s4);min-height:var(--h-btn)} /* ==== TEMALAR (KK-006, 01.11.2026 UYGULANDI) · tek anahtar Bileşenler yalnız rol token'ı kullanır (--eylem, --eylem-uzerine, --eylem-yazi, --eylem-golge, --vurgu, --zemin-*). Rengi değiştirmek = aşağıdaki blokta tek satır. Greige zemin yetiskin/notr'a girdi (KK-004 kapandı). */ html[data-tema="cocuk"]{ --eylem:var(--gok);--eylem-uzerine:var(--gok-k);--eylem-yazi:var(--beyaz);--eylem-golge:var(--golge-gok); --vurgu:var(--gok); --zemin-sayfa:var(--beyaz);--zemin-kart:var(--beyaz);--zemin-bant:var(--keten); --isaret:var(--gok-k);--isaret-acik:var(--gok-o);--cip-kenar:var(--gok-o);--r-kart:14px; /* palet B (02.11.2026): işaret gök-koyu (pastelde ≥5,7:1) */ --altin:var(--gok-k);--altin-k:var(--gok-k);--altin-o:var(--gok-o); /* altın çocuk temasından çekildi; logo görsel dosya, etkilenmez */ --r-btn:24px;--btn-radius:999px; /* düğme köşesi temadan: cocuk yuvarlak, yetiskin/notr kökteki 4px */ } /* yetiskin · palet B, sıcak kömür + pirinç (KK-010, Olcay 03.11.2026). Kontrast: düğme beyaz/kömür 13,88 · hover beyaz/pirinç 6,20 · vurgu/keten 5,03 · metin/keten 12,07 · odak pirinç/beyaz 6,20 */ html[data-tema="yetiskin"]{ --eylem:#2f2c29;--eylem-uzerine:#7a5c28;--eylem-yazi:var(--beyaz);--eylem-golge:rgba(122,92,40,.30); --vurgu:#7a5c28;--isaret:#7a5c28;--isaret-acik:#c4a46a;--altin:#7a5c28;--focus:#7a5c28;--cip-kenar:#dcd5ca;--ink:#2a2724; --btn2-zemin:transparent;--btn2-kenar:#2f2c29;--btn2-yazi:#2a2724; --krom:var(--greige-taban);--mark:var(--greige-isaret);--line-2:var(--greige-isaret);--kil:var(--greige-cizgi); --keten:#ece7df;--zemin-pudra:#e4ddd2;--calm:#f7f4ef;--line:#dcd5ca; --zemin-sayfa:var(--beyaz);--zemin-kart:var(--beyaz);--zemin-bant:#ece7df; --btn-radius:4px;--r-btn:4px;--r-kart:0px; } html[data-tema="notr"]{ --eylem:var(--ceviz);--eylem-uzerine:var(--altin-k);--eylem-yazi:var(--beyaz);--eylem-golge:var(--golge-ceviz); --vurgu:var(--altin-k); --krom:var(--greige-taban);--calm:var(--greige-taban);--keten:var(--greige-keten);--zemin-pudra:var(--greige-pudra);--mark:var(--greige-isaret);--line:var(--greige-cizgi);--line-2:var(--greige-isaret);--kil:var(--greige-cizgi);--altin:var(--altin-k); --zemin-sayfa:var(--beyaz);--zemin-kart:var(--beyaz);--zemin-bant:var(--greige-keten); } /* koyu · 3. tema (Ali, 07.11.2026): yetişkin sayfaların tamamen koyu alternatifi; kömür (#2f2c29 ailesi) katmanları + açık metin + açık pirinç. Kontrast (ölçüldü): metin/sayfa 14,29 · metin/hero-bant 11,80 · ikincil metin/hero 7,78 · pirinç vurgu/sayfa 7,09 · pirinç/hero 5,86 · pirinç/tas 5,44 · birincil düğme koyu/pirinç 7,09 (hover 8,98) · odak halkası pirinç/zeminler ≥5,44 · çizgi/sayfa 1,75 (bilinçli düşük). Yetişkin kurallarını (:is ile) paylaşır. */ html[data-tema="koyu"]{ --surface:#1f1d1b;--zemin-sayfa:#1f1d1b;--calm:#262320;--krom:#262320;--keten:#2f2c29;--zemin-bant:#2f2c29;--zemin-kart:#2a2724;--zemin-acik:#2a2724; --tas:#35312d;--zemin-tas:#35312d;--zemin-pudra:#35312d;--zemin-capraz:#2f2c29;--svg-zemin:#2a2724;--box:#35312d;--box-2:#2a2724; --greige-taban:#262320;--greige-keten:#2f2c29;--greige-pudra:#35312d;--greige-isaret:#36322e;--greige-cizgi:#4a443d; --ink:#f1ece4;--ink-2:#c9c1b5;--ink-3:#c9c1b5;--ink-orta:#c9c1b5;--ink-4:#8a8278;--yazi-ters:#1f1d1b;--yazi-orta:#c9c1b5; --line:#4a443d;--line-2:#36322e;--line-input:#8a8278;--kil:#4a443d;--cip-kenar:#5a534a;--mark:#3a3226;--mark-fg:#e2c891; --eylem:#c4a46a;--eylem-uzerine:#d6ba85;--eylem-yazi:#1f1d1b;--eylem-golge:rgba(0,0,0,.45); --vurgu:#c4a46a;--isaret:#c4a46a;--isaret-acik:#8e7444;--altin:#c4a46a;--altin-k:#c4a46a;--altin-o:#8e7444;--altin-a:#3a3226;--focus:#c4a46a; --btn2-zemin:transparent;--btn2-kenar:#f1ece4;--btn2-yazi:#f1ece4;--btn2-hover:#2f2c29; --err:#e8a196;--err-bg:#3a2320;--ok:#9fcfa9;--ok-bg:#1f2e23; --koyu-perde:rgba(31,29,27,.9);--koyu-ince:rgba(255,255,255,.06); --btn-radius:4px;--r-btn:4px;--r-kart:0px;color-scheme:dark; } /* fotoğraf üstündeki yazılar her temada beyaz kalır */ html[data-tema="koyu"] :is(.pj-kart-bant,.mega-kart,.gb,.slayt,.slayt-gorsel){--yazi-ters:var(--beyaz)} /* fotoğraf üstü açık etiketler koyu perdeye döner; yarı saydam beyaz zeminler ince açık katmana */ html[data-tema="koyu"] :is(.pj-hero-foto figcaption,.oda-foto figcaption,.kol-foto span,.tk-sayac,.pj-dt-isaret,.vt-kalp,.tk-gal-ok,.tk-fav-ik,.b-kontrol,.kontrol){background:var(--koyu-perde);color:var(--ink)} html[data-tema="koyu"] :is(.cip,.pj-etiket li,.pj-cozum,.kat-tk .kat-foto .kat-yt,.tk-tm .tk-yt){background:var(--koyu-ince)} html[data-tema="koyu"] .cip{border-color:var(--line)} html[data-tema="koyu"][data-sayfa="proje"]{--zemin-hero:var(--keten);--zemin-surec:var(--calm);--zemin-diger:var(--zemin-sayfa);--zemin-guven:var(--calm);--zemin-sss:var(--keten)} html[data-tema="koyu"] .btn.p:focus-visible{box-shadow:0 0 0 2px var(--zemin-sayfa),0 0 0 4px var(--focus)} /* ==== PROJE KATEGORİSİ ŞABLONU (02.11.2026, ONAY BEKLİYOR) · design/projeler-bebek-odasi.html, araclar/sablon/uret.py ==== */ /* hero foto: mobilde 3:2 (eski 4:3 bankı kırpıyordu), masaüstü 4:3; ile ayrı mobil kare desteklenir */ .pj-hero-foto picture{display:block;height:100%} @media(max-width:1023px){.pj-hero-foto{aspect-ratio:3/2}} /* hero odak noktası (Kalfa odak {x,y} %, 10'luk adım; 07.11.2026): kutu oranı görselden farklıyken kırpma merkezi. Sınıf yoksa orta. */ .pj-hero-foto img{object-position:var(--odak-x,50%) var(--odak-y,50%)} .odak-x-0{--odak-x:0%}.odak-x-10{--odak-x:10%}.odak-x-20{--odak-x:20%}.odak-x-30{--odak-x:30%}.odak-x-40{--odak-x:40%}.odak-x-50{--odak-x:50%}.odak-x-60{--odak-x:60%}.odak-x-70{--odak-x:70%}.odak-x-80{--odak-x:80%}.odak-x-90{--odak-x:90%}.odak-x-100{--odak-x:100%} .odak-y-0{--odak-y:0%}.odak-y-10{--odak-y:10%}.odak-y-20{--odak-y:20%}.odak-y-30{--odak-y:30%}.odak-y-40{--odak-y:40%}.odak-y-50{--odak-y:50%}.odak-y-60{--odak-y:60%}.odak-y-70{--odak-y:70%}.odak-y-80{--odak-y:80%}.odak-y-90{--odak-y:90%}.odak-y-100{--odak-y:100%} /* giriş (kompakt): .kap.rS.giris-k içinde .ilke3-bas; dikey boşluk rN → rS */ .giris-k .ilke3-bas{margin-bottom:0} /* süreç yatay varyantı: başlık üstte (CTA sağda), 4 adım yan yana (tablet 2, mobil 1) */ .surec.yatay .surec-ic{grid-template-columns:minmax(0,1fr);gap:var(--s6)} .surec.yatay .surec-liste{display:grid;gap:var(--s4)} .surec.yatay .surec-liste li{flex-direction:column;gap:var(--s2);padding:var(--s4) 0 0;border-bottom:0;border-top:1px solid var(--line)} /* Süreç numarası (02.11, Olcay): büyük italik rakam, çizgi rakamın dibinden sağa uzanır; zaman çizelgesi */ .surec.yatay .surec-liste li{border-top:0;padding-top:0} .surec.yatay .surec-liste .no{display:flex;align-items:baseline;gap:var(--s3);width:100%;font-size:var(--f-display);line-height:1;font-weight:500} .surec.yatay{--surec-cizgi-renk:var(--isaret-acik);--surec-cizgi-kalinlik:2px;--surec-cizgi-taban:.18em} /* bileşen token'ları (design-system ajanı 02.11) */ .surec.yatay .surec-liste .no::after{content:"";flex:1;align-self:flex-end;height:var(--surec-cizgi-kalinlik);margin-bottom:var(--surec-cizgi-taban);background:var(--surec-cizgi-renk)} /* Süreç ışık yolculuğu (02.11, Olcay rev2): bölüm görününce (.gorundu, ortak/gorunce.js) beyaz çekirdekli bir ışık parçası 01'in çizgisinde soldan sağa ilerler, sırayla 02 ve 03'e geçer; 04'te kısa çizgiden uçtaki noktaya varır ve noktadan iki su halkası yayılır. Bir kez oynar; hareket azaltmada kapalı. Durağan son hal animasyonsuz hal ile aynıdır. */ .surec.yatay{--surec-adim-sure:1.6s;--surec-isik:var(--isaret);--surec-isik-cekirdek:var(--beyaz);--surec-nokta:8px} .surec.yatay .surec-liste li:nth-child(2){--sira:1}.surec.yatay .surec-liste li:nth-child(3){--sira:2}.surec.yatay .surec-liste li:nth-child(4){--sira:3} /* çizgi katmanı: 10px yüksek kutu, ortasında ince çizgi; ışık ayrı katman olarak bu kutuda kayar */ .surec.yatay .surec-liste .no::after{height:var(--surec-nokta-kutu);margin-bottom:calc(var(--surec-cizgi-taban) - var(--surec-nokta-kutu)/2 + 1px);background:linear-gradient(var(--surec-cizgi-renk),var(--surec-cizgi-renk)) 0 50%/100% var(--surec-cizgi-kalinlik) no-repeat} /* son adım: kısa çizgi + uçta nokta; .no içerik kadar geniş ki halka noktanın üstüne otursun */ .surec.yatay .surec-liste li:last-child .no{width:auto;align-self:flex-start;position:relative} .surec.yatay .surec-liste li:last-child .no::after{flex:0 0 var(--s7);background:linear-gradient(var(--surec-cizgi-renk),var(--surec-cizgi-renk)) 0 50%/100% var(--surec-cizgi-kalinlik) no-repeat} .surec.yatay .surec-liste li:last-child .no::before{content:"";position:absolute;right:calc(var(--surec-nokta)/2);bottom:calc(var(--surec-cizgi-taban) + 1px);width:var(--surec-nokta);height:var(--surec-nokta);border:1.5px solid var(--surec-isik);border-radius:50%;transform:translate(50%,50%) scale(1);opacity:0;pointer-events:none} /* animasyon · kayan nokta (02.11 rev3, Olcay): tek dolu nokta 01'in başından çıkar, çizgiler boyunca sırayla kayar, 04'ün ucunda durur ve iki kez ışır (halka). Başta 04'te nokta yoktur; son halde nokta 04'ün ucunda kalır. */ .surec.yatay.gorundu .surec-liste .no{animation:surec-rakam .6s ease-out both;animation-delay:calc(var(--sira,0) * var(--surec-adim-sure))} .surec.yatay.gorundu .surec-liste h3{animation:surec-baslik .7s ease-out both;animation-delay:calc(var(--sira,0) * var(--surec-adim-sure) + .25s)} .surec.yatay.gorundu .surec-liste .no::after{background-image:radial-gradient(circle,var(--isaret) 0 calc(var(--surec-nokta)/2),transparent calc(var(--surec-nokta)/2 + .5px)),linear-gradient(var(--surec-cizgi-renk),var(--surec-cizgi-renk));background-size:var(--surec-nokta-kutu) var(--surec-nokta-kutu),100% var(--surec-cizgi-kalinlik);background-repeat:no-repeat;background-position:calc(var(--surec-nokta-kutu) * -1) 50%,0 50%;animation:surec-kay var(--surec-adim-sure) linear both;animation-delay:calc(var(--sira,0) * var(--surec-adim-sure))} .surec.yatay.gorundu .surec-liste li:last-child .no::after{background-image:radial-gradient(circle,var(--isaret) 0 calc(var(--surec-nokta)/2),transparent calc(var(--surec-nokta)/2 + .5px)),linear-gradient(var(--surec-cizgi-renk),var(--surec-cizgi-renk));background-size:var(--surec-nokta-kutu) var(--surec-nokta-kutu),100% var(--surec-cizgi-kalinlik);background-repeat:no-repeat;background-position:calc(var(--surec-nokta-kutu) * -1) 50%,0 50%;animation:surec-varis calc(var(--surec-adim-sure) * .5) cubic-bezier(.2,.6,.3,1) both;animation-delay:calc(3 * var(--surec-adim-sure))} .surec.yatay.gorundu .surec-liste li:last-child .no::before{animation:surec-halka 1s ease-out 2 forwards;animation-delay:calc(3.5 * var(--surec-adim-sure))} .surec.yatay{--surec-nokta-kutu:14px} @keyframes surec-rakam{from{color:var(--surec-cizgi-renk)}to{color:var(--isaret)}} @keyframes surec-baslik{from{color:var(--ink)}to{color:var(--isaret)}} /* başlık başta okunur (antrasit), nokta geçince gök */ @keyframes surec-kay{0%{background-position:calc(var(--surec-nokta-kutu) * -1) 50%,0 50%}100%{background-position:calc(100% + var(--surec-nokta-kutu)) 50%,0 50%}} @keyframes surec-varis{0%{background-position:calc(var(--surec-nokta-kutu) * -1) 50%,0 50%}100%{background-position:100% 50%,0 50%}} @keyframes surec-halka{0%{opacity:.85;transform:translate(50%,50%) scale(1)}100%{opacity:0;transform:translate(50%,50%) scale(5)}} @media (prefers-reduced-motion:reduce){.surec.yatay.gorundu .surec-liste .no,.surec.yatay.gorundu .surec-liste h3,.surec.yatay.gorundu .surec-liste .no::after,.surec.yatay.gorundu .surec-liste .no::before{animation:none}.surec.yatay.gorundu .surec-liste li:last-child .no::after{background-position:100% 50%,0 50%}} .surec.yatay{--surec-baslik:22px} .surec.yatay .surec-liste h3{font-size:var(--surec-baslik);font-weight:600;letter-spacing:.005em} /* 600: UI/UX ajanı kararı 02.11 (Cormorant 19px'te 500 seçilmiyor) */ @media(min-width:768px){.surec.yatay .surec-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}} @media(min-width:1024px){ .surec.yatay .surec-bas{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s7);row-gap:var(--s4)} .surec.yatay .surec-bas>*{grid-column:1} .surec.yatay .surec-bas .ziyaret-eylem{grid-column:2;grid-row:1/span 3;align-self:end} .surec.yatay .surec-liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)} } /* proje ızgarası: mobil/tablet 2, masaüstü 3 sütun. Kart görünümü rev2'de (kart b, aşağıda) */ .pj-izgara{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s3)} @media(min-width:768px){.pj-izgara{gap:var(--s6) var(--s5)}} @media(min-width:1024px){.pj-izgara{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s5)}} .pj-kart{display:grid;gap:2px;align-content:start;min-width:0;scroll-margin-top:96px} .pj-izgara>.pj-kart[hidden]{display:none} .pj-kart-foto{margin:0 0 var(--s2);overflow:hidden;border-radius:var(--r-kart,0)} .pj-kart-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in;transition:transform var(--gecis) ease} @media(hover:hover){.pj-kart-foto img:is(:hover,:focus-visible){transform:scale(var(--hover-olcek))}} .pj-kart-foto img:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} .pj-kart-no{font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--isaret);font-weight:600} .pj-kart h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h2);line-height:1.2;min-width:0} .pj-kart h3 a{display:block;min-height:var(--h-link);padding-block:var(--s2);color:inherit;text-decoration:none} /* (kaldırıldı 02.11: klasik altı çizgi, soldan sağa çizgiyle çift görünüyordu) */ @media(min-width:1024px){.pj-kart h3 a{padding-block:0;line-height:var(--h-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} .pj-kart-alt{font-size:var(--f-small);color:var(--ink-2)} .pj-kart .pj-etiket{margin-bottom:0} @media(max-width:767px){.pj-kart .pj-etiket li:nth-child(n+3){display:none}} /* SSS artı ikonu (tam genişlik '＋' karakteri yerine SVG maske; açılınca 45° döner). Eski ＋ işaretleri gizlenir */ .sss-son .akordeon summary b{display:none} .sss-son .akordeon summary::after{content:"";flex:none;width:20px;height:20px;background:var(--altin);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 3.5v13M3.5 10h13'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 3.5v13M3.5 10h13'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s ease} .sss-son .akordeon details[open] summary::after{transform:rotate(45deg)} /* açık madde kart zeminine çıkar: hangi soruda olduğu belli olur (02.11, Olcay). Negatif kenar, metni kaydırmadan zemini taşırır. */ .sss-son .akordeon details{transition:background-color .25s ease} .sss-son .akordeon details[open]{background:var(--zemin-kart);border-radius:var(--r-kart,4px);margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4);border-bottom-color:transparent} .sss-son .akordeon details:has(+ details[open]){border-bottom-color:transparent} /* ==== PROJE ŞABLONU rev1 (02.11.2026) ==== */ /* çapa: #projeler sabit üst çubuğun altına girmesin */ [data-blok="proje-listesi"]{scroll-margin-top:calc(var(--h-bar) + 1px)} @media(min-width:1024px){[data-blok="proje-listesi"]{scroll-margin-top:calc(var(--h-bar-d) + 1px)}} /* yatay süreç adım metni küçük gövde */ .surec.yatay .surec-liste p{font-size:var(--f-label);line-height:1.5} /* çocuk teması bant ritmi (proje sayfası): komşu bölümler farklı açık pastel; beyazlar sayfa zemini */ html[data-tema="cocuk"][data-sayfa="proje"]{--zemin-hero:var(--zemin-acik);--zemin-surec:var(--zemin-acik);--zemin-diger:var(--zemin-acik);--zemin-guven:var(--beyaz);--zemin-sss:var(--pastel-bulut-a)} html[data-tema="cocuk"][data-sayfa="proje"] .sss-son{--vurgu:var(--gok-k)} /* tek pastel bant: italik vurgu gök-koyu (gök bulut-a üstünde 4,5 altı) */ /* ==== PROJE ŞABLONU rev2 (02.11.2026, KK-007) ==== */ /* yorum başlığı vurgusu: "İcan's'ı tercih edenler" */ .yorum-ozet .h2 em{font-style:italic;color:var(--vurgu)} /* kart b: kapak 4:5, alt kenarda koyu geçişli bant üstünde ad (serif) + alt ad. Görsel → galeri (lightbox), başlık → detay adresi */ .pj-kart-b{position:relative;margin:0;border-radius:var(--r-kart,0);overflow:hidden;background:var(--zemin-acik)} .pj-kart-b .pj-kart-foto{margin:0;border-radius:0} .pj-kart-b .pj-kart-foto img{transition:transform var(--gecis) ease} /* tüm kart dokunulur: başlık bağlantısına klavyeyle gelinince görsel de büyür */ @media(hover:hover){.pj-kart-b:hover .pj-kart-foto img,.pj-kart-b:has(a:focus-visible) .pj-kart-foto img{transform:scale(var(--hover-olcek))}} .pj-kart-bant{position:absolute;inset:auto 0 0;padding:var(--s7) var(--s4) var(--s4);background:linear-gradient(to bottom,var(--kart-bant-0),var(--kart-bant-1) 30%,var(--kart-bant-2));color:var(--yazi-ters);pointer-events:none} .pj-kart-bant h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h2);line-height:1.15} .pj-kart-bant h3 a{pointer-events:auto;display:block;width:fit-content;max-width:100%;color:inherit;text-decoration:none;min-height:var(--h-link);padding-block:var(--s2) 0} .pj-kart-bant h3 a{--alt-iz:transparent;--alt-renk:currentColor;--alt-konum:calc(100% - 2px)} /* çizgi: ortak .alt kalıbı, ters renk */ .pj-kart-bant h3 a:focus-visible{outline:2px solid var(--yazi-ters);outline-offset:2px} .pj-kart-bant p{font-size:var(--f-label);line-height:1.4;opacity:.95} /* teslim konumu (08.11.2026): ad + alt adın altında tek satır; masaüstünde de --f-label; ikon dekoratif. Bant geçişi yüzdeyle → satır eklenince kendiliğinden uzar */ .pj-kart-bant .pj-kart-konum{display:flex;align-items:center;gap:var(--s1);min-width:0;margin-top:var(--s2);font-size:var(--f-label);color:var(--yazi-ters);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pj-kart-konum svg{flex:none;fill:var(--isaret-acik)} .pj-kart-konum>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis} /* flex'te ellipsis metin kutusunda çalışır */ @media(max-width:767px){.pj-kart-bant{padding:var(--s6) var(--s3) var(--s3)}.pj-kart-bant h3{font-size:var(--f-lead)}.pj-kart-bant h3 a{min-height:0;padding-block:0}} @media(min-width:1024px){.pj-kart-bant{padding:var(--s8) var(--s5) var(--s5)}.pj-kart-bant p:not(.pj-kart-konum){font-size:var(--f-small)}} /* diğer projeler c: görselsiz pastel kart; tema token'ı (cocuk pastel, yetiskin/notr greige) */ .pj-diger-c{--dc-1:var(--zemin-pudra);--dc-2:var(--keten);--dc-3:var(--calm)} html[data-tema="cocuk"] .pj-diger-c{--dc-1:var(--pastel-pudra-a);--dc-2:var(--pastel-adacayi-a);--dc-3:var(--pastel-bulut-a)} .pj-diger-c a{display:flex;flex-direction:column;gap:var(--s2);height:100%;padding:var(--s5);border-radius:var(--r-kart,0);color:var(--ink);text-decoration:none;background:var(--dc-1)} .pj-diger-c li:nth-child(3n+2) a{background:var(--dc-2)}.pj-diger-c li:nth-child(3n) a{background:var(--dc-3)} .pj-diger-c h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1);line-height:1.15} .pj-diger-c p{color:var(--ink-2);font-size:var(--f-small)} .pj-diger-c .pj-diger-ok{margin-top:auto;padding-top:var(--s3);font-size:var(--f-small);font-weight:600;color:var(--eylem-uzerine)} /* bağlantı davranışı kitteki .lnk.u ile aynı; tüm kart dokunulur olduğu için tetik kartın üzerine gelmek (02.11). Çizgi ortak kalıpta */ @media(hover:hover){.pj-diger-c a:is(:hover,:focus-visible) .ok{transform:translateX(var(--ok-kayma))}} /* ilke3-rozet: pastel yuvarlak ikon rozeti, ortalı metin (yalnız proje şablonu; ana sayfa .ilke3 değişmez) */ .ilke3-rozet{--rz-1:var(--zemin-pudra);--rz-2:var(--keten);--rz-3:var(--calm)} html[data-tema="cocuk"] .ilke3-rozet{--rz-1:var(--pastel-pudra-a);--rz-2:var(--pastel-adacayi-a);--rz-3:var(--pastel-bulut-a)} .ilke3-rozet .ilke3-liste li{justify-items:center;text-align:center} .ilke3-rozet .ilke3-liste p{max-width:32ch} .ilke3-rozet .ilke-rozet{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--rz-1);margin-bottom:var(--s2)} .ilke3-rozet li:nth-child(3n+2) .ilke-rozet{background:var(--rz-2)}.ilke3-rozet li:nth-child(3n) .ilke-rozet{background:var(--rz-3)} .ilke3-rozet .ilke-ik{width:36px;height:36px;margin:0;color:var(--isaret)} @media(min-width:768px){.ilke3-rozet .ilke3-liste li+li{border-left:0}.ilke3-rozet .ilke3-liste li:first-child{padding-left:var(--s6)}} /* ==== BLOK DİKEY RİTMİ (rev2, 02.11.2026): her blok yalnız padding-block:var(--rB), margin yok. Komşu iki blok arası = 2×rB (masaüstü 96, mobil 60). Kahramandan sonraki ilk blok ve footer öncesi son blok 2×rB. Zeminli bantlar da aynı ölçüyü kullanır (eski: padding rN + komşunun margin rN → 160–256px). */ section.rN,section.rS,section.rF{margin-top:0;padding-block:var(--rB)} section.miras.rF{padding-block:var(--rN)} :not(.rN,.rS,.rF)+:is(section.rN,section.rS,section.rF){padding-top:calc(var(--rB) * 2)} main>:is(section.rN,section.rS,section.rF):last-child{padding-bottom:calc(var(--rB) * 2)} /* Çapraz satış bandı (02.11, Olcay): ızgara altında belirgin şerit; solda başlık + tek cümle, sağda düğme. Proje ↔ hazır takım. */ .capraz{margin-top:var(--s7);padding:var(--s6) var(--s5);background:var(--zemin-capraz,var(--bulut-a));border-radius:var(--r-kart,4px);display:grid;gap:var(--s4);align-items:center} .capraz-yazi{display:grid;gap:var(--s2);min-width:0} .capraz h3{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h2);line-height:1.2} .capraz p{color:var(--ink-2);font-size:var(--f-small);max-width:60ch} .capraz .btn{justify-self:start} @media(min-width:768px){.capraz{grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);padding:var(--s6) var(--s7)}.capraz .btn{justify-self:end}} html[data-tema="yetiskin"],html[data-tema="notr"]{--zemin-capraz:var(--greige-keten)} /* Çapraz satış bandı · B varyantı (görselli, 02.11; Olcay: kitte dursun, sayfalarda şimdilik A). Görsel isteğe bağlı: . Mobilde küçük kare görsel yazının solunda. */ .capraz.b{grid-template-columns:72px minmax(0,1fr);column-gap:var(--s4)} .capraz.b img{width:72px;height:72px;object-fit:cover;border-radius:calc(var(--r-kart,4px) * .7);display:block;align-self:start} .capraz.b .btn{grid-column:1/-1} @media(min-width:768px){.capraz.b{grid-template-columns:160px minmax(0,1fr) auto;column-gap:var(--s6);padding:var(--s5) var(--s7) var(--s5) var(--s5)}.capraz.b img{width:160px;height:120px}.capraz.b .btn{grid-column:auto}} /* Hakkımızda zemin ritmi (03.11.2026): atölye (.ilke3, taban) ile süreç komşu; süreç keten zemine alınır, komşu bölümler aynı zeminde olmaz */ html[data-tema="notr"][data-sayfa="hakkimizda"]{--zemin-surec:var(--keten)} /* ==== CİDDİ TEMA KURALLARI (KK-010, B seçildi 03.11.2026) ==== */ /* proje sayfası zeminleri: greige keten / calm / beyaz; komşu iki bant aynı ton olmaz */ html[data-tema="yetiskin"][data-sayfa="proje"]{--zemin-hero:var(--keten);--zemin-surec:var(--calm);--zemin-diger:var(--beyaz);--zemin-guven:var(--calm);--zemin-sss:var(--keten)} /* odak halkası pirinç (beyaz araya); birincil hover: zemin pirince döner + sıcak gölge, alt çizgi yok */ html:is([data-tema="yetiskin"],[data-tema="koyu"]) .btn.p:focus-visible,html:is([data-tema="yetiskin"],[data-tema="koyu"]) .btn.p.odak{box-shadow:0 0 0 2px var(--zemin-sayfa),0 0 0 4px var(--isaret)} @media(hover:hover){html:is([data-tema="yetiskin"],[data-tema="koyu"]) .btn.p:not([disabled]):not(.pasif):not(:focus-visible):hover{box-shadow:0 6px 14px var(--eylem-golge)}} /* bağlantı: kalıcı 2px pirinç alt çizgi + 600; yalnız tıklanabilir öğeler */ html:is([data-tema="yetiskin"],[data-tema="koyu"]) .lnk.u{--alt-iz:var(--isaret);--alt-renk:var(--ink);--alt-kalin:2px;font-weight:600} html:is([data-tema="yetiskin"],[data-tema="koyu"]) p a:not(.btn):not(.lnk){color:var(--isaret);font-weight:600;text-decoration:underline 2px var(--isaret);text-underline-offset:.22em} /* sıcaklık: etiket ölçü çizgisi pirinç; ilke rozeti greige zemin + ince pirinç çizgi */ html:is([data-tema="yetiskin"],[data-tema="koyu"]) .etiket::before{--isaret-acik:var(--isaret)} html:is([data-tema="yetiskin"],[data-tema="koyu"]) .ilke3-rozet .ilke-rozet{box-shadow:inset 0 0 0 1px var(--isaret-acik)} html:is([data-tema="yetiskin"],[data-tema="koyu"]) .surec.yatay .surec-liste .no{color:var(--isaret)} @media (prefers-reduced-motion:reduce){html:is([data-tema="yetiskin"],[data-tema="koyu"]) :is(.btn,.lnk,.alt){transition:none}} /* yetişkin tema, telefon: hero fotoğrafı kısalır, birincil çağrı ilk ekrana girer (dönüşüm önerisi, 03.11) */ @media(max-width:767px){html:is([data-tema="yetiskin"],[data-tema="koyu"]) .pj-hero-foto{aspect-ratio:16/9}} /* ==== /CİDDİ TEMA KURALLARI ==== */ /* ==== METİN SAYFASI · sablon-metin (KK-011 adım A, 03.11.2026) ====
+
[ nav.icindekiler ] [ article.metin-sayfa ] + davet (.kat-cagri) Tema: rol token'larından (notr varsayılan; cocuk/yetiskin otomatik). */ .pj-hero.kisa{grid-template-columns:1fr} .pj-hero.kisa .pj-hero-ic{padding-block:var(--s7) var(--s6);gap:var(--s3)} /* hero yüksekliği sayfadan sayfaya oynamasın: giriş 1024+ en çok 2 satır (geniş ölçü), mobilde 4 satıra kadar aynı yükseklik */ .pj-hero.kisa .pj-hero-ic{min-height:16rem} .pj-hero.kisa .lead{max-width:none} @media(min-width:1024px){.pj-hero.kisa .pj-hero-ic{padding-block:var(--s8) var(--s7);padding-right:var(--gut);min-height:16.75rem}.pj-hero.kisa .lead{max-width:min(100%,82ch)}} .metin-duzen{display:grid;gap:var(--s6);padding-block:var(--s6) var(--rN)} @media(min-width:1024px){.metin-duzen{grid-template-columns:240px minmax(0,1fr);gap:var(--s8);align-items:start;padding-top:var(--s7)}} /* SSS: içindekiler soru öğelerine (details[id]) bağlanır; ortak/icindekiler.js hedefi açar */ .metin-sayfa .akordeon details{scroll-margin-top:calc(var(--h-bar) + var(--s4))} @media(min-width:1024px){.metin-sayfa .akordeon details{scroll-margin-top:calc(var(--h-bar-d) + var(--s5))}} /* akordeon okuma sütununda: soru yazısı gövde ölçüsünde, cevap sütunu doldurur */ .metin-sayfa .akordeon{margin-top:0} .metin-sayfa .akordeon .ic{max-width:none} .metin-sayfa .akordeon .ic p{margin:0} .guncelleme{margin:0} .guncelleme time{color:var(--ink)} /* içindekiler: <1024 details açılır; ≥1024 sol sütunda yapışkan, summary gizli (ortak/icindekiler.js açık tutar) */ .icindekiler{border:1px solid var(--line);background:var(--zemin-kart)} .icindekiler summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--h-btn);padding-inline:var(--s4);font-weight:600;cursor:pointer;list-style:none} .icindekiler summary::-webkit-details-marker{display:none} .icindekiler summary::after{content:"";width:8px;height:8px;border-right:var(--cizgi-kalinlik) solid currentColor;border-bottom:var(--cizgi-kalinlik) solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--gecis-hizli) ease} .icindekiler details[open] summary::after{transform:translateY(2px) rotate(-135deg)} .icindekiler ol{list-style:none;margin:0;padding:0 var(--s4) var(--s3);counter-reset:ic} .icindekiler li{counter-increment:ic;border-top:1px solid var(--line-2)} .icindekiler a{display:flex;gap:var(--s3);align-items:baseline;min-height:var(--h-link);padding-block:var(--s3);font-size:var(--f-small);line-height:1.4;color:var(--ink-2);text-decoration:none} .icindekiler a::before{content:counter(ic,decimal-leading-zero);font-size:var(--f-label);color:var(--isaret);font-weight:600} .icindekiler a:focus-visible{color:var(--ink);outline-offset:-2px} @media(hover:hover){.icindekiler a:is(:hover,:focus-visible){color:var(--ink)}} .icindekiler a:active{color:var(--ink)} @media(min-width:1024px){ .icindekiler{position:sticky;top:calc(var(--h-bar-d) + var(--s5));border:0;border-top:var(--cizgi-kalinlik) solid var(--isaret);background:none} .icindekiler summary{min-height:0;padding:var(--s3) 0;font-size:var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--isaret);cursor:default;pointer-events:none} .icindekiler summary::after{display:none} .icindekiler ol{padding:0} } /* okuma sütunu */ .metin-sayfa{max-width:68ch;font-size:var(--f-body);line-height:1.7;color:var(--ink)} .metin-sayfa>.guncelleme{margin-bottom:var(--s6)} .metin-sayfa section{scroll-margin-top:calc(var(--h-bar) + var(--s4))} .metin-sayfa section+section{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--line-2)} @media(min-width:1024px){.metin-sayfa section{scroll-margin-top:calc(var(--h-bar-d) + var(--s5))}} .metin-sayfa h2{font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h1);line-height:1.15;text-wrap:balance;margin:0 0 var(--s4)} .metin-sayfa h3{font-size:var(--f-body);font-weight:700;line-height:1.4;margin:var(--s6) 0 var(--s2)} .metin-sayfa p,.metin-sayfa ul,.metin-sayfa ol,.metin-sayfa dl{margin:0 0 var(--s4)} .metin-sayfa ul,.metin-sayfa ol{padding-left:1.4em} .metin-sayfa li+li{margin-top:var(--s2)} .metin-sayfa li::marker{color:var(--isaret)} .metin-sayfa strong{font-weight:700} .metin-sayfa dl{display:grid;gap:var(--s1) var(--s5)} .metin-sayfa dt{font-weight:700} .metin-sayfa dd{margin:0 0 var(--s3);color:var(--ink-2)} @media(min-width:768px){.metin-sayfa dl{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.metin-sayfa dd{margin:0}} .metin-sayfa section:target h2{color:var(--vurgu)} /* gövde bağlantısı: kitteki .lnk.u diliyle aynı alt çizgi (ortak .alt kalıbı) */ .metin-sayfa p a:not(.btn):not(.lnk),.metin-sayfa li a:not(.btn):not(.lnk),.metin-sayfa dd a:not(.btn):not(.lnk){color:var(--ink);font-weight:600;text-decoration:none;padding-bottom:2px;background-image:linear-gradient(var(--isaret),var(--isaret)),linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:0 100%,0 100%;background-size:100% var(--cizgi-kalinlik),0% var(--cizgi-kalinlik);transition:background-size var(--gecis) ease} @media(hover:hover){.metin-sayfa :is(p,li,dd) a:not(.btn):not(.lnk):is(:hover,:focus-visible){background-size:100% var(--cizgi-kalinlik),100% var(--cizgi-kalinlik)}} html:is([data-tema="yetiskin"],[data-tema="koyu"]) .metin-sayfa p a:not(.btn):not(.lnk){text-decoration:none} /* yayına kapalı işaret ([SORU]): yalnız tasarım/demo; yayın aracı bu sınıfı taşıyan sayfayı yazmaz (KK-011) */ /* blok uyarı: inline .eksik işaretinden (satır 66) ayrı; yalnız metin sayfasında kutu */ :is(.metin-sayfa,.metin-duzen) .eksik{display:block;font-weight:400;font-family:inherit;margin:0 0 var(--s4);padding:var(--s4);border:var(--cizgi-kalinlik) dashed var(--err);background:var(--err-bg);color:var(--err);font-size:var(--f-small);line-height:1.5} :is(.metin-sayfa,.metin-duzen) .eksik::before{content:"[SORU] ";font-weight:700;letter-spacing:.04em} /* CMS boş alan (03.11.2026): zorunlu ama henüz girilmemiş firma bilgisi; satır içi, sade, italik. Yayına engel değil, metin "(… CMS'ten girilecek)" */ .metin-sayfa .cms-bos{color:var(--ink-2);font-style:italic} /* ==== /METİN SAYFASI ==== */ /* PROJE TALEBİ FORMU (KK-011) · design/proje-talebi.html · ui-kit.html#talepform
[ .ozet-hata.talep-durum (hidden) ] [ .alan … ] [ .alan > .kutucuk ] [ .btn.p ] Hata: .alan.hata (input/select/textarea/kutucuk kenarı kırmızı) + .yardim metni hata mesajına döner. */ .talep{display:grid;gap:var(--s5);width:100%;max-width:560px} .talep .alan,.talep .yukle,.talep .kutucuk,.talep .ozet-hata{max-width:none} .alan.hata select,.alan.hata textarea{border-color:var(--err)} .alan.hata .kutucuk input{outline:2px solid var(--err);outline-offset:1px} .alan .kutucuk a{color:inherit;text-decoration:underline;text-underline-offset:3px} .talep-durum{display:grid;gap:var(--s3)} .talep-durum[hidden]{display:none} .talep-durum:focus{outline:2px solid var(--focus);outline-offset:2px} .talep-durum .ziyaret-eylem{gap:var(--s4)} .talep-duzen{display:grid;gap:var(--s6);padding-block:var(--s6) var(--rN)} @media(min-width:1024px){.talep-duzen{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:var(--s8);align-items:start;padding-top:var(--s7)}} .ziyaret-eylem .btn svg{width:20px;height:20px;flex:none} @media(min-width:1024px){.talep-duzen .kat-cagri{grid-template-columns:1fr;padding:var(--s7)}.talep-duzen .kat-cagri .ziyaret-eylem{justify-content:flex-start}} /* KARİYER (KK-014) · design/kariyer.html · ui-kit.html#dosya #ilan #tuzak .dosya:
[label] [input type=file] [.dosya-secili hidden: .dosya-ad .dosya-boyut button.dosya-kaldir] [.yardim] Yerel input kalır (klavye + sürükle-bırak tarayıcıda yerleşik); seçimden sonra ad/boyut satırı ve "Kaldır". */ .dosya input[type="file"]{min-height:auto;padding:var(--s4);border-style:dashed;cursor:pointer;font-size:var(--f-small)} .dosya input[type="file"]:focus-visible{border-color:var(--ink);outline:2px solid var(--focus);outline-offset:1px} .dosya.hata input[type="file"]{border-color:var(--err)} .dosya-secili{display:flex;align-items:center;gap:var(--s3);min-height:var(--h-link);padding:var(--s2) var(--s2) var(--s2) var(--s4);border:1px solid var(--line);background:var(--zemin-kart);font-size:var(--f-small)} .dosya-secili[hidden]{display:none} .dosya-ad{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .dosya-boyut{flex:none;color:var(--ink-2);font-variant-numeric:tabular-nums} .dosya-kaldir{flex:none;min-height:var(--h-link);padding:0 var(--s3);border:0;background:transparent;font:600 var(--f-small) var(--yazi);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .dosya-kaldir:focus-visible{outline:2px solid var(--focus);outline-offset:1px} /* karakter sayacı: .alan içinde, .yardim ile aynı satır ölçüsü */ .karakter-sayac{align-self:flex-end;font-size:var(--f-label);color:var(--ink-2);font-variant-numeric:tabular-nums} /* honeypot: insan görmez, ekran okuyucu okumaz, sekmeyle gelinmez (aria-hidden + tabindex=-1) */ .tuzak{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} /* ilan kartı:
[h3.ilan-ad] [ul.ilan-etiket] [details.ilan-ayrinti > summary(.ilan-ac/.ilan-kapat) + .ic] [a.btn.p data-pozisyon] */ .ilanlar{display:grid;gap:var(--s4);margin:0;padding:0;list-style:none} .ilan{display:grid;gap:var(--s3);padding:var(--s5);border:1px solid var(--line);background:var(--zemin-kart);border-radius:var(--r-kart,4px);scroll-margin-top:calc(var(--h-bar) + var(--s4))} .ilan-ad{margin:0;font-family:var(--yazi-baslik);font-weight:500;font-size:var(--f-h2);line-height:1.2} .ilan-etiket{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none} .ilan-etiket li{padding:2px var(--s3);border:1px solid var(--line);border-radius:999px;font-size:var(--f-label);font-weight:600} .ilan-ayrinti summary{display:inline-flex;align-items:center;min-height:var(--h-link);font-weight:600;cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px} .ilan-ayrinti summary::-webkit-details-marker{display:none} .ilan-ayrinti .ilan-kapat,.ilan-ayrinti[open] .ilan-ac{display:none} .ilan-ayrinti[open] .ilan-kapat{display:inline} .ilan-ayrinti .ic{display:grid;gap:var(--s2);padding-top:var(--s2);color:var(--ink-2)} .ilan-ayrinti h4{margin:var(--s2) 0 0;font-size:var(--f-body);color:var(--ink)} .ilan-ayrinti p,.ilan-ayrinti ul{margin:0} .ilan .btn{justify-self:start} .kariyer-ilan{display:grid;gap:var(--s5);padding-top:var(--s7)} @media(min-width:1024px){.ilan{scroll-margin-top:calc(var(--h-bar-d) + var(--s5))}.ilanlar{grid-template-columns:repeat(2,minmax(0,1fr))}} /* video bandı (07.11.2026, hakkimizda drone): dikey 9:16 video + metin; CSS filigran katmanı (dosyaya gömülmez), video görünür olunca yüklenir (ortak/video-bant.js); hareket azaltmada autoplay yok → poster + oynat düğmesi */ .video-bant{display:grid;gap:var(--s6);align-items:center} .video-bant .vb-ic{display:grid;gap:var(--s4)} .video-bant .vb-ic .lead{margin:0} .vb-cerceve{position:relative;margin:0;aspect-ratio:9/16;max-height:78vh;overflow:hidden;border-radius:var(--r-kart,0);background:var(--tas,#eee);justify-self:center;width:min(100%,420px)} .vb-cerceve video{display:block;width:100%;height:100%;object-fit:cover} .vb-cerceve.filigran::after{z-index:1} .vb-oynat{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink,#111);cursor:pointer;display:grid;place-items:center} .vb-oynat[hidden]{display:none} .vb-oynat svg{width:24px;height:24px;margin-left:3px} .vb-oynat:focus-visible{outline:2px solid var(--isaret,currentColor);outline-offset:3px} @media (min-width:1024px){.video-bant{grid-template-columns:7fr 5fr;gap:var(--s8)}.video-bant .vb-ic{max-width:var(--olcu)}} /* .video-bant.ters: masaüstünde video solda, yazı sağda */ @media (min-width:1024px){.video-bant.ters{grid-template-columns:5fr 7fr}.video-bant.ters .vb-cerceve{order:-1}} .vb-cerceve.kare{aspect-ratio:1/1;width:min(100%,560px)}