/* ============================================================================ imzala.net — Tasarım v3: "MATERIAL 3" (üst bar + ikonlar + elle tema seçimi) Önceki iki tasarım da kayıtlı: v1 git etiketi `tasarim-v1`, v2 (bu dosyanın 09.08.2026 öncesi hâli) git etiketi `tasarim-material-oncesi`. Ayrıca sitenin yenileme öncesi TAM kopyası web-eski/ klasöründe duruyor ve /tasarim/eski adresiyle canlıda açılabiliyor — geri dönüş yolu kesilmedi. ---------------------------------------------------------------------------- SÖZLEŞME (v1'den beri): Bu dosyadaki TÜM seçici adları ve değişken adları korunur — HTML/JS değişmeden yeni yüz giyer. Sayfaların satır içi stilleri 400'den fazla yerde var(--…) çağırıyor; bir değişken adı düşerse görünüm SESSİZCE bozulur. Yeni ad EKLENİR, eski ad SİLİNMEZ. v2 → v3'te DEĞİŞEN · Yazı tipi Roboto → Roboto Flex; ikonlar için Material Symbols eklendi. · Yüzey düzeni M3 kap katmanlarına geçti: sayfa neredeyse beyaz (--ground), kart hafif leylak (--surface), kartın İÇİ tekrar beyaz (--surface2). v2'de tam tersiydi (leylak sayfa, beyaz kart). · Kartlarda gölge yok — M3 "tonal yükselti". Köşe 16 → 24 (--r-lg). · Koyu tema artık ELLE de seçilebiliyor: . Seçim yoksa sistem tercihi geçerli (eski davranış aynen sürüyor). · Üst bar, altbilgi, çip/rozet/durum, stepper, seçilebilir kart gibi yeni bileşen sınıfları eklendi. Hiçbiri mevcut sayfalardaki bir adla çakışmıyor (09.08.2026'da 22 ad tek tek tarandı). TİPOGRAFİ — hedef kitle 45-70 yaş: v1'den gelen "hiçbir metin 14px altına inmez" ve "dokunma hedefi ≥40px" kuralları AYNEN geçerli. İKON DAYANIKLILIĞI: Material Symbols bir CDN yazı tipidir. Yüklenemezse ikonun yerinde adı yazar ("approval" gibi). Bu yüzden ANLAM TAŞIYAN hiçbir ikon yalnız bırakılmaz — yanında metin etiketi olur; yalnız-ikon düğmelerde aria-label/title zorunludur. İŞLEVSEL BLOKLAR — v1'den DEĞİŞTİRİLMEDEN taşındı, DOKUNMA: .udf-page (A4 ölçüleri sekme duraklarına bağlı) · .notebox span[style*=…] hex ezmeleri (doc.html renderNotes bağı) · #ownLink !important · #dropZone --line yeniden tanımı · .ok/.err/.muted kaskad sırası · devre dışı bloğunun ghost'tan SONRA gelmesi. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..800&family=Roboto+Mono:wght@400;500&display=swap'); /* İKONLAR ARTIK YEREL (16.08.2026): Google'dan gelen ikon fontu reklam engelleyici / kısıtlı kurum ağında bloklanınca ekran "approval, check, edit" gibi ham adlarla doluyordu (saha testinde birebir görüldü). Kullanılan 40 ikonla kırpılmış alt küme (~32 KB) /fonts/ altında; ikonlar için üçüncü tarafa istek kalmadı. Yazı fontu (Roboto) üçüncü tarafta kalabilir — o yüklenmezse sistem fontu devreye girer, zarar yok. YENİ İKON EKLERKEN: /fonts/material-symbols-kirpik.woff2 alt kümesinde o ikon YOKTUR; css2?...&icon_names= adresinden yeni woff2 indirilip bu dosya değiştirilmeli — yoksa yeni ikon her ortamda ham ad olarak görünür. */ @font-face{ font-family:'Material Symbols Outlined'; font-style:normal; font-weight:100 700; font-display:block; src:url('/fonts/material-symbols-kirpik.woff2') format('woff2'); } *{box-sizing:border-box} /* ============================================================================ RENK BELİRTEÇLERİ Koyu tema iki yerde tanımlı: (1) sistem tercihi, (2) elle seçim. CSS'te tek bir bloğu iki koşula bağlamanın yolu yok; ikisi de aynı değerleri taşır. BİRİNİ DEĞİŞTİREN DİĞERİNİ DE DEĞİŞTİRMELİ. ========================================================================= */ :root{ color-scheme:light; /* --- 4px ölçek (M3 4dp ızgarası) --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:24px; --r-xl:28px; /* --- tipografi --- */ --sans:"Roboto Flex","Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --mono:"Roboto Mono",ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace; /* --- yüzeyler (M3 kap katmanları) --- --ground sayfa zemini (surface) --surface KART yüzeyi (surface-container-low) --surface2 kartın İÇİ, satır/kutu (surface-container-lowest = beyaz) --surface3 en sönük katman (surface-container-high; salt-okunur alan) */ --ground:#fef7ff; --surface:#f7f2fa; --surface2:#ffffff; --surface3:#ece6f0; --ink:#1d1b20; --ink-soft:#49454f; --ink-faint:#6e6a75; --line:#cac4d0; /* hairline: YAPISAL çizgi (ayraç, satır kutusu) */ --line-soft:#e7e0ec; /* --line-strong: ETKİLEŞİMLİ bileşen sınırı (input, ghost). M3 outline. WCAG 1.4.11 ≥3:1 — v2'den değişmedi, ölçüsü kanıtlıydı. */ --line-strong:#79747e; /* --- eylem: M3 birincil MOR --- */ --accent:#6750a4; --accent-dark:#563d99; --accent-soft:#eaddff; --accent-ink:#53389e; --on-accent:#ffffff; /* mor kabın üstündeki en koyu yazı (M3 on-primary-container) */ --on-accent-soft:#21005d; /* ikincil kap: çip ve tonal düğme (M3 secondary-container) */ --accent2-soft:#e8def8; --on-accent2-soft:#1d192b; /* --- ikincil (ghost) düğme: M3 "outlined" --- */ --ghost-bg:transparent; --ghost-bg-h:rgba(103,80,164,.08); /* --- devre dışı: opacity DEĞİL, ayrı çift (v1 kuralı, kalıcı durumlar var) --- */ --disabled-bg:#e4e1e6; --disabled-fg:#48454e; --disabled-line:#cbc7cf; /* --- durum renkleri: v1'den AYNEN (ölçülü kontrast üçlüleri) --- */ --good:#0d6e3f; --good-soft:#e7f4ec; --good-line:#a6d5bc; --warn:#8a5a06; --warn-soft:#fbf0d9; --warn-line:#e0c58a; --bad:#b3261e; --bad-soft:#fbe9e7; --bad-line:#eeb3ad; --info:#1f5c9e; --info-soft:#eaf1f9; --info-line:#b3cce6; /* --- yardımcılar --- */ --focus:#6750a4; --golge-1:0 1px 2px rgba(28,22,38,.10),0 1px 3px 1px rgba(28,22,38,.06); --golge-2:0 1px 2px rgba(28,22,38,.08),0 2px 10px -2px rgba(28,22,38,.12); --kagit:#ffffff; --kagit-kenar:rgba(16,20,28,.14); /* duzenle.html:10 body{background:var(--bg)} yazıyor; v2'de bu ad hiç tanımlı değildi, bildirim geçersiz kalıp gövde zemini boş kalıyordu. */ --bg:var(--ground); } /* --- KOYU TEMA (1/2): sistem tercihi. Kullanıcı ELLE açık seçtiyse uygulanmaz. --- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ground:#141218; --surface:#1d1b20; --surface2:#0f0d13; --surface3:#2b2930; --ink:#e6e0e9; --ink-soft:#cac4d0; --ink-faint:#a5a0ac; --line:#49454f; --line-soft:#322f37; --line-strong:#938f99; --accent:#d0bcff; --accent-dark:#c2a9fb; --accent-soft:#4f378b; --accent-ink:#cdbdf6; --on-accent:#381e72; --on-accent-soft:#eaddff; --accent2-soft:#4a4458; --on-accent2-soft:#e8def8; --ghost-bg:transparent; --ghost-bg-h:rgba(208,188,255,.12); --disabled-bg:#2e2c33; --disabled-fg:#cac4d0; --disabled-line:#46434b; --good:#5fd39a; --good-soft:#10281d; --good-line:#26543f; --warn:#e5b969; --warn-soft:#2a2113; --warn-line:#5a4622; --bad:#ff9086; --bad-soft:#2c1614; --bad-line:#5e2b26; --info:#7fb6f0; --info-soft:#12202f; --info-line:#27435f; --focus:#d0bcff; --golge-1:0 1px 2px rgba(0,0,0,.5); --golge-2:0 1px 2px rgba(0,0,0,.5),0 10px 26px -12px rgba(0,0,0,.75); --kagit-kenar:rgba(0,0,0,.6); } } /* --- KOYU TEMA (2/2): elle seçim. Sistem açık olsa da kazanır. --- */ :root[data-theme="dark"]{ color-scheme:dark; --ground:#141218; --surface:#1d1b20; --surface2:#0f0d13; --surface3:#2b2930; --ink:#e6e0e9; --ink-soft:#cac4d0; --ink-faint:#a5a0ac; --line:#49454f; --line-soft:#322f37; --line-strong:#938f99; --accent:#d0bcff; --accent-dark:#c2a9fb; --accent-soft:#4f378b; --accent-ink:#cdbdf6; --on-accent:#381e72; --on-accent-soft:#eaddff; --accent2-soft:#4a4458; --on-accent2-soft:#e8def8; --ghost-bg:transparent; --ghost-bg-h:rgba(208,188,255,.12); --disabled-bg:#2e2c33; --disabled-fg:#cac4d0; --disabled-line:#46434b; --good:#5fd39a; --good-soft:#10281d; --good-line:#26543f; --warn:#e5b969; --warn-soft:#2a2113; --warn-line:#5a4622; --bad:#ff9086; --bad-soft:#2c1614; --bad-line:#5e2b26; --info:#7fb6f0; --info-soft:#12202f; --info-line:#27435f; --focus:#d0bcff; --golge-1:0 1px 2px rgba(0,0,0,.5); --golge-2:0 1px 2px rgba(0,0,0,.5),0 10px 26px -12px rgba(0,0,0,.75); --kagit-kenar:rgba(0,0,0,.6); } html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.6; background:var(--ground); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .2s ease,color .2s ease; /* Uzun bölünemez diziler (alan adı, e-posta, token) dar ekranda satırı taşırıp tüm sayfayı yana kaydırıyordu — gizlilik metnindeki alan adı 375px'te 19px taşırıyordu. Yalnız taşacağı zaman böler; normal metne dokunmaz. */ overflow-wrap:break-word; } /* Belge yüzeyleri hariç: A4 çıktısı ekranda basılı hâliyle aynı olmalı. */ .udf-page,.kagit{overflow-wrap:normal} /* ------------------------------------------------------------------ ikonlar Material Symbols. font-size ikonun boyudur; hizalama için vertical-align. ANLAM TAŞIYAN ikon yalnız bırakılmaz (bkz. başlıktaki dayanıklılık notu). */ .material-symbols-outlined{ font-family:'Material Symbols Outlined'; font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal; text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal; direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; user-select:none;vertical-align:middle; } /* NOKTA HAVUZU — v1'den beri (kullanıcı isteği 04.08.2026: "belli belirsiz nokta havuzu, mouse ile hareket eden"). nokta.js --mx/--my/--nokta-op yazar; çizim tamamen burada. İki katman: sabit çok silik ızgara (::before) + imleci izleyen maskeli vurgu (::after). pointer-events:none — tıklamayı asla yutmaz. */ :root{ --mx:50vw; --my:30vh; --nokta-op:0; } body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.6px); background-size:26px 26px; } body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(color-mix(in srgb, var(--accent-ink) 55%, transparent) 1.2px, transparent 1.9px); background-size:26px 26px; opacity:var(--nokta-op); transition:opacity .5s; -webkit-mask-image:radial-gradient(230px at var(--mx) var(--my), #000 0%, transparent 100%); mask-image:radial-gradient(230px at var(--mx) var(--my), #000 0%, transparent 100%); } /* 19.08.2026 — kullanıcı: "mouse yazının üstüne gelince noktalar yazı ile karışıyor; noktalar gene dursun da yazının altındaki ve yakın çevresindeki kabarmasın, yandaki boş deniz güzel". Çözüm: vurgu katmanının maskesine ikinci bir katman (okuma sütununu kaplayan dikey bant) eklenir ve birinciden EKSİLTİLİR. Böylece imleç ister yazının üstünde olsun ister yanındaki denizde, parlak noktalar sütuna GİRMEZ; kenarlardaki vurgu aynen kalır. Sabit ızgara (::before) hiç dokunulmadan her yerde durur — "noktalar dursun". Bandın iki yanı --nokta-gecis kadar yumuşatılır, keskin dikey kesik olmasın. --nokta-sutun, .wrap/.container'ın max-width'i (880px) ile AYNI kalmalı; biri değişirse öbürü de değişir, yoksa bant metnin kenarını sıyırır. @supports ŞART: mask-composite bilinmeyen tarayıcıda iki maske TOPLANIR ve sütun sürekli parlar — desteklemeyen tarayıcı eski tek-maskeli hâlde kalır. Dar pencerede sütun ekranı doldurur, bant her yeri kaplar, vurgu kendiliğinden susar: deniz yoksa kabarma da yok. */ :root{ --nokta-sutun:880px; --nokta-gecis:120px; } @supports (mask-composite:subtract){ body::after{ --nokta-imlec:radial-gradient(230px at var(--mx) var(--my), #000 0%, transparent 100%); --nokta-bant:linear-gradient(to right, transparent calc(50% - var(--nokta-sutun)/2 - var(--nokta-gecis)), #000 calc(50% - var(--nokta-sutun)/2), #000 calc(50% + var(--nokta-sutun)/2), transparent calc(50% + var(--nokta-sutun)/2 + var(--nokta-gecis))); /* SADECE standart ad yazılır. Üstteki kuralın -webkit-mask-image'ı günümüz tarayıcılarında mask-image'in diğer adıdır, bu satır onu ezer; ayrı bir özellik gibi davranan bir motor çıkarsa da tek maskeli eski hâline düşer. */ mask-image:var(--nokta-imlec), var(--nokta-bant); mask-composite:subtract; /* birinci katman EKSİ ikinci: imleç halkası \ sütun bandı */ } } /* içerik noktaların ÜSTÜNDE kalsın (v1 kuralı) */ .wrap{position:relative;z-index:1} /* hareket hassasiyeti: vurgu katmanı hiç çalışmasın, sabit ızgara kalır */ @media (prefers-reduced-motion:reduce){ body::after{display:none} } @media (prefers-reduced-motion:reduce){ *{transition-duration:.001ms !important;animation-duration:.001ms !important} } /* ---------------------------------------------------------------- yerleşim */ .wrap{max-width:880px;margin:0 auto;padding:var(--s7) var(--s6) 72px} /* Kısa sayfalarda (giriş, imza aracı) altbilgi ekranın dibine insin. :has() ile SINIRLI: altbilgisi olmayan duzenle.html'in yerleşimine dokunmaz. Desteklemeyen tarayıcıda kural düşer, altbilgi içeriğin hemen altında kalır. */ body:has(> .footer){display:flex;flex-direction:column;min-height:100vh} /* width:100% ŞART: esnek kutuda 'margin:0 auto' gerilmeyi (stretch) iptal eder, .wrap içeriğine göre daralır ve dar ekranda sayfayı yana kaydırır. */ body:has(> .footer) > .wrap{flex:1 0 auto;width:100%} /* .container üst bar ve altbilginin iç genişliği — .wrap ile HİZALI olmalı, yoksa logo ile başlık aynı dikey çizgide durmaz. */ .container{max-width:880px;margin:0 auto;padding:0 var(--s6)} .wide{max-width:1120px} /* --------------------------------------------------------- iki sütunlu pano Belge panosu ve imza ekranı maketteki gibi iki sütun: solda BELGE, sağda "şimdi ne yapacağım" (durum, eylemler, bağlantılar). Dar ekranda tek sütuna iner ve SAĞ sütun öne geçer — telefonda önce eylem görünmeli, uzun belge önizlemesi değil. */ .panoIzgara{ display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(300px,.85fr); gap:var(--s5);align-items:start; } .sutun{display:flex;flex-direction:column;gap:var(--s5);min-width:0} .sutun>.card{margin-bottom:0} @media (max-width:940px){ .panoIzgara{grid-template-columns:1fr} .sutun:nth-child(1){order:2} .sutun:nth-child(2){order:1} } /* Yaşam döngüsü şeridindeki alt açıklama (TASLAK "sahip düzenler" gibi). */ .stepper .alt{font-size:11px;color:var(--ink-faint);white-space:nowrap} .stepper .seg.active .alt{color:var(--ink-soft)} /* ------------------------------------------------------------------ üst bar */ .topbar{background:var(--ground);border-bottom:1px solid var(--line-soft);position:relative;z-index:2} .topbar .inner{min-height:64px;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s2);padding-bottom:var(--s2)} .spacer{flex:1} .brand{ display:inline-flex;align-items:center;gap:10px;color:var(--ink); font-size:20px;font-weight:600;letter-spacing:-.2px;text-decoration:none;white-space:nowrap; } .brand:hover{text-decoration:none;color:var(--ink)} .brand .mark{ width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--on-accent-soft); display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; } .brand .mark .material-symbols-outlined{font-size:20px} .brand em{font-style:normal;color:var(--accent)} .nav{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap} .nav a{ color:var(--ink);font-size:14.5px;font-weight:500;padding:9px var(--s4); border-radius:999px;white-space:nowrap;text-decoration:none; } .nav a:hover{background:var(--surface);text-decoration:none;color:var(--ink)} /* yalnız-ikon düğme: aria-label ZORUNLU */ .iconbtn{ width:40px;height:40px;min-height:40px;border-radius:999px;border:none;background:transparent; color:var(--ink);display:inline-flex;align-items:center;justify-content:center; cursor:pointer;padding:0;flex-shrink:0;box-shadow:none; } .iconbtn:hover{background:var(--surface);color:var(--ink);box-shadow:none} .iconbtn .material-symbols-outlined{font-size:22px} /* ------------------------------------------------------------- tipografi */ .eyebrow{ font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--accent-ink);margin:0 0 var(--s3);font-weight:500; } h1{ font-family:var(--sans);font-size:32px;line-height:1.25;font-weight:500; margin:0 0 var(--s2);text-wrap:balance;color:var(--ink);letter-spacing:-.4px; } h2{ font-family:var(--sans);font-size:20px;line-height:1.3;font-weight:500; margin:0 0 var(--s4);color:var(--ink); display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; } p.sub{color:var(--ink-soft);font-size:16px;margin:0 0 var(--s7);max-width:64ch} /* ------------------------------------------------------------------ kart M3 tonal kart: gölge YOK, kenarlık YOK — sayfadan renk tonuyla ayrılır. */ .card{ background:var(--surface); border:none; border-radius:var(--r-lg); padding:var(--s6); box-shadow:none; margin-bottom:var(--s5); } /* kartın içindeki beyaz kutu (M3 surface-container-lowest) */ .card-lowest{background:var(--surface2)} .panel{background:var(--surface);border-radius:var(--r-xl);padding:var(--s7);min-height:300px} /* ---------------------------------------------------- işlem adımları şeridi JS sözleşmesi AYNI: adimlar[k].className = 'adim' + ' tamam' | ' etkin'. */ .adimlar{ display:flex;list-style:none;margin:0 0 var(--s5);padding:0;gap:var(--s2); font-size:14.5px;font-weight:500;line-height:1.3;flex-wrap:wrap; } .adimlar .adim{ flex:1;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center; min-height:44px;padding:9px var(--s4); color:var(--ink-soft);background:var(--surface); border:1px solid var(--line-soft);border-radius:999px; } .adimlar .adim .no{font-variant-numeric:tabular-nums;color:var(--ink-faint)} .adimlar .adim.tamam{background:var(--good-soft);color:var(--good);border-color:var(--good-line)} .adimlar .adim.tamam .no{color:var(--good)} .adimlar .adim.tamam .no::after{content:'✓';margin-left:1px} .adimlar .adim.etkin{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .adimlar .adim.etkin .no{color:var(--on-accent)} @media (max-width:520px){ .adimlar{font-size:13.5px;gap:var(--s1)} .adimlar .adim{padding:8px var(--s3);gap:4px;min-height:40px} } /* ------------------------------------------------------------------ stepper Yatay numaralı adım şeridi (yeni). .seg.done → onay imi, .seg.active → dolu. */ .stepper{display:flex;align-items:flex-start;flex-wrap:wrap} .stepper .seg{display:flex;align-items:flex-start} .stepper .line{width:72px;height:2px;background:var(--line);margin:21px 6px 0;border-radius:2px} .stepper .seg.done .line,.stepper .seg.active .line{background:var(--accent)} .stepper .node{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:88px} .stepper .circ{ width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:16px;font-weight:600;border:2px solid var(--line);color:var(--ink-soft);background:transparent; transition:background .2s,color .2s; } .stepper .lbl{font-size:13.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap} .stepper .seg.active .circ{background:var(--accent);color:var(--on-accent);border-color:transparent} .stepper .seg.active .lbl{font-weight:600;color:var(--ink)} .stepper .seg.done .circ{background:var(--accent-soft);color:var(--on-accent-soft);border-color:transparent} .stepper .circ .material-symbols-outlined{font-size:20px;display:none} .stepper .seg.done .circ .material-symbols-outlined{display:inline} .stepper .seg.done .circ .num{display:none} .stepper.sm .circ{width:36px;height:36px;font-size:14px} .stepper.sm .line{width:56px;margin-top:17px} .stepper.sm .lbl{font-size:12.5px} .stepper.sm .node{min-width:78px} /* ------------------------------------------------------------- form alanları */ label{ font-size:15px;font-weight:500;color:var(--ink-soft); display:block;margin-bottom:var(--s2); } input,textarea,select{ width:100%;font-family:var(--sans);font-size:16px;line-height:1.4; min-height:44px; /* dokunma hedefi */ border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:10px var(--s4); background:var(--surface2);color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; } input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1} input:hover,textarea:hover,select:hover{border-color:var(--ink)} input:focus,textarea:focus,select:focus{ background:var(--surface2);border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } input[readonly]{color:var(--ink-soft);background:var(--surface3);cursor:text} textarea{min-height:96px;resize:vertical;padding:var(--s3) var(--s4)} textarea.doc-edit{ min-height:300px;font-family:var(--mono);font-size:13.5px;line-height:1.6; background:var(--surface3);tab-size:4; } /* select oku saf CSS ile (dış ikon yok) */ select{ -webkit-appearance:none;appearance:none;padding-right:var(--s8);cursor:pointer; background-image: linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%), linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%); background-position:calc(100% - 21px) calc(50% - 1px),calc(100% - 16px) calc(50% - 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .row{display:flex;gap:var(--s3);flex-wrap:wrap} .row>*{flex:1;min-width:180px} /* 'flex:0 0 auto' verilmiş öğeler (✕ sil, Kopyala…) 180px'e gerilmesin; dokunma hedefi 40px altına da inmesin. home.html JS'i de bu deseni yazar. */ .row>*[style*="0 0 auto"]{min-width:40px} /* ------------------------------------------------------------------ düğmeler M3 "filled button": hap biçimi, mor dolgu, beyaz yazı. Yükseklik ≥40px. */ button{ font-family:var(--sans);font-size:15.5px;font-weight:500;letter-spacing:.01em; min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); color:var(--on-accent);background:var(--accent); border:1px solid var(--accent);border-radius:999px; padding:8px var(--s6);cursor:pointer; box-shadow:none; transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease; } button:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:var(--golge-1)} button:active{box-shadow:none} /* GHOST = M3 "outlined button": dolgu yok, dış çizgi + mor etiket. */ button.ghost{ background:var(--ghost-bg);color:var(--accent-ink);border:1px solid var(--line-strong); font-weight:500;box-shadow:none; } button.ghost:hover{background:var(--ghost-bg-h);color:var(--accent-ink);border-color:var(--accent-ink);box-shadow:none} button.small{font-size:14.5px;padding:6px var(--s4);min-height:40px;min-width:40px} /* --- .btn ailesi (yeni): etiketini düğme gibi göstermek için.