/* ayarlar.css — Ayarlar modalı wy3 (Plan 3 Task 17; design/web_ayarlar-showcase/ayarlar.css + v03-modal-kart.html).
   `.ay-*` sınıflarının TEK sahibi bu dosyadır (`.ay-ik`/`.ton-*`/`.ky-*` ekran-kisayol.css'te; `.anahtar/.secici/.radyo/.kbd` kabuk.css'te).
   Renk YALNIZ takma adlardan (var(--…)); ham renk değeri YOK. Satır içi stil YOK (CSP style-src 'self'): çubuk genişlikleri `.g-0 … .g-100`. */

/* ---- Modal (v03) ------------------------------------------------------------------------------------- */
.ay-modal { width: min(1060px, calc(100% - 48px)); height: min(730px, calc(100% - 48px)); display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.ay-sekmeler { display: flex; flex-direction: column; gap: 2px; padding: 20px 14px 14px; background: var(--sheet-2); border-right: 1px solid var(--line); min-height: 0; overflow-y: auto; }
.ay-sekme-liste { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.ay-sekmeler h2 { margin: 0 8px 14px; font-size: var(--fs-h1); font-weight: var(--fw-x); }
.ay-sekme { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; flex: none; border-radius: var(--r-sm); font-size: var(--fs-sub); font-weight: var(--fw-semi);
  border: 0; background: transparent; color: var(--ink); font-family: inherit; text-align: left; width: 100%; cursor: pointer; }
.ay-sekme .ay-ik { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.ay-sekme.aktif { background: var(--sheet); color: var(--ink); font-weight: var(--fw-x); box-shadow: var(--shadow-sm), inset 3px 0 0 var(--primary); }
.ay-sekme.kritik { color: var(--danger-deep); margin-top: auto; }
.ay-sekme:focus-visible, .ay-ara-girdi:focus-visible, .ay-satir[role="button"]:focus-visible, .anahtar:focus-visible, .acilir:focus-visible,
.ay-modal .ikon-btn:focus-visible, .ay-modal a:focus-visible, .ay-sag-ic:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; } /* Task 46: bağlantılar + kaydırılabilir panel (varsayılan 1px halka yerine) */
.ay-sag { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ay-sag-bas { height: 72px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 28px; border-bottom: 1px solid var(--line); }
.ay-sag-bas h3 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-x); }
.ay-sag-bas p { margin: 0; font-size: var(--fs-cap); color: var(--sub); }
.ay-sag-bas .bos-alan { flex: 1; }
.ay-sag-ic { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; background: var(--app-bg); }
.ay-kim-mini { display: flex; align-items: center; gap: 10px; padding: 8px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.ay-kim-mini .ad { font-weight: var(--fw-x); font-size: var(--fs-sub); }
.ay-kim-mini .alt { font-size: var(--fs-micro); color: var(--sub); }
/* Ayar bulucu (üst şerit): v03'te yok, wy5'in arama kutusunun küçüğü. */
.ay-ara { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--line-soft); border: 1.5px solid transparent; color: var(--muted); flex: none; }
.ay-ara:focus-within { background: var(--sheet); border-color: var(--primary-tint); }
.ay-ara .ik { width: 16px; height: 16px; }
.ay-ara-girdi { border: 0; background: transparent; outline: 0; font: inherit; font-size: var(--fs-sub); color: var(--ink); width: 150px; }
.sonuc-bas { display: flex; align-items: center; gap: 10px; margin: 6px 4px 8px; flex: none; }
.sonuc-bas b { font-size: var(--fs-sub); font-weight: var(--fw-x); }
.sonuc-bas .say { font-size: var(--fs-micro); font-weight: var(--fw-x); color: var(--sub); background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; }
.sonuc-bas .git { margin-left: auto; border: 0; background: transparent; font: inherit; font-size: var(--fs-cap); font-weight: var(--fw-bold); color: var(--primary-deep); cursor: pointer; }

/* ---- Grup kartı + satır ------------------------------------------------------------------------------ */
.ay-grup-bas { display: flex; align-items: center; gap: 8px; margin: 22px 4px 8px; font-size: var(--fs-cap); font-weight: var(--fw-x); color: var(--sub); letter-spacing: .2px; }
.ay-grup-bas:first-child { margin-top: 0; }
.ay-grup-bas .bos-alan { flex: 1; }
.ay-grup { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.ay-grup-not { margin: 8px 6px 0; font-size: var(--fs-cap); color: var(--sub); line-height: 1.4; }
.ay-ortala { text-align: center; }
.ay-satir { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 16px; position: relative; }
.ay-satir[role="button"] { cursor: pointer; }
.ay-satir + .ay-satir { border-top: 1px solid var(--line-soft); }
.ay-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ay-ust { font-size: var(--fs-cap); color: var(--sub); font-weight: var(--fw-semi); }
.ay-ad { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--ink); }
.ay-acik { font-size: var(--fs-cap); color: var(--sub); line-height: 1.38; }
.ay-deger { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sub); color: var(--sub); white-space: nowrap; flex: none; }
.ay-ok { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ay-satir.secili { background: var(--line-soft); }
.ay-satir.kritik .ay-ad { color: var(--danger-deep); }
.ay-grup.pasif .anahtar, .ay-grup.pasif .ay-ad { opacity: .55; }
.anahtar { cursor: pointer; }
mark.bul { background: var(--gold-soft); color: var(--gold-ink); border-radius: 3px; padding: 0; box-shadow: inset 0 -1.5px 0 var(--gold-line); }

/* ---- Açılır seçici (select görünümü + liste kutusu) ---------------------------------------------------- */
.acilir-kap { position: relative; display: inline-flex; flex: none; }
.acilir { height: 34px; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 13px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--sheet); border: 1.5px solid var(--line); font-size: var(--fs-sub); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; box-shadow: var(--shadow-sm); }
.acilir .ik { width: 16px; height: 16px; color: var(--muted); }
.acilir.odak { border-color: var(--primary-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-tint) 45%, transparent); }
.acilir-liste { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; margin: 0; padding: 4px; list-style: none; min-width: 100%; white-space: nowrap;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.acilir-liste li { padding: 8px 12px; border-radius: 8px; font-size: var(--fs-sub); font-weight: var(--fw-semi); cursor: pointer; }
.acilir-liste li.odakli { background: var(--line-soft); }
.acilir-liste li[aria-selected="true"] { color: var(--primary-deep); }

/* ---- İzin rozeti: renk + ŞEKİL + METİN (Açık ● / Kapalı ○ / Engellendi ⊘) -------------------------------- */
.izin { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 9px; border-radius: var(--r-pill);
  font-size: var(--fs-cap); font-weight: var(--fw-x); white-space: nowrap; flex: none; }
.izin i { width: 10px; height: 10px; border-radius: 50%; flex: none; position: relative; }
.izin--acik { background: var(--presence-online-soft); color: var(--on-primary-soft); }
.izin--acik i { background: var(--presence-online); }
.izin--kapali { background: var(--presence-invisible-soft); color: var(--sub); }
.izin--kapali i { border: 2px solid var(--muted); }
.izin--uyari { background: var(--gold-soft); color: var(--gold-ink); }
.izin--uyari i { background: var(--gold); }
.izin--engel { background: var(--danger-soft); color: var(--on-danger-soft); }
.izin--engel i { border: 2px solid var(--danger-ink); }
.izin--engel i::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 2px; margin-top: -1px; background: var(--danger-ink); transform: rotate(-45deg); }

/* ---- Kilit etiketi (salt-okunur alan) ---------------------------------------------------------------- */
.salt { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); flex: none;
  background: var(--sheet-2); border: 1px solid var(--line); color: var(--sub); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; }
.salt .ik { width: 14px; height: 14px; color: var(--muted); }

/* ---- Kota çubuğu (genişlik sınıfları aşağıda) --------------------------------------------------------- */
.kota { display: flex; flex-direction: column; gap: 6px; }
.kota-ust { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sub); }
.kota-ust b { font-weight: var(--fw-bold); flex: 1; min-width: 0; }
.kota-ust span { color: var(--sub); font-size: var(--fs-cap); white-space: nowrap; }
.kota-iz { height: 8px; border-radius: var(--r-pill); background: var(--line-soft); border: 1px solid var(--line); overflow: hidden; display: flex; }
.kota-iz i { display: block; height: 100%; background: var(--primary); border-radius: var(--r-pill); }
.kota-iz i.altin { background: var(--gold); }
.kota-iz--yigin i { border-radius: 0; }
.kota-iz--yigin i + i { box-shadow: inset 2px 0 0 var(--card-bg); }
.kota-iz i.mercan { background: var(--accent); } .kota-iz i.mor { background: var(--note-accent); }
.lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-cap); color: var(--sub); }
.lejant span { display: inline-flex; align-items: center; gap: 6px; }
.lejant i { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.lejant i.mercan { background: var(--accent); } .lejant i.mor { background: var(--note-accent); }
/* Çubuk genişlikleri: g-<yüzde> (JS genislikSinifi) */
.g-0{width:0%} .g-1{width:1%} .g-2{width:2%} .g-3{width:3%} .g-4{width:4%} .g-5{width:5%} .g-6{width:6%} .g-7{width:7%} .g-8{width:8%} .g-9{width:9%}
.g-10{width:10%} .g-11{width:11%} .g-12{width:12%} .g-13{width:13%} .g-14{width:14%} .g-15{width:15%} .g-16{width:16%} .g-17{width:17%} .g-18{width:18%} .g-19{width:19%}
.g-20{width:20%} .g-21{width:21%} .g-22{width:22%} .g-23{width:23%} .g-24{width:24%} .g-25{width:25%} .g-26{width:26%} .g-27{width:27%} .g-28{width:28%} .g-29{width:29%}
.g-30{width:30%} .g-31{width:31%} .g-32{width:32%} .g-33{width:33%} .g-34{width:34%} .g-35{width:35%} .g-36{width:36%} .g-37{width:37%} .g-38{width:38%} .g-39{width:39%}
.g-40{width:40%} .g-41{width:41%} .g-42{width:42%} .g-43{width:43%} .g-44{width:44%} .g-45{width:45%} .g-46{width:46%} .g-47{width:47%} .g-48{width:48%} .g-49{width:49%}
.g-50{width:50%} .g-51{width:51%} .g-52{width:52%} .g-53{width:53%} .g-54{width:54%} .g-55{width:55%} .g-56{width:56%} .g-57{width:57%} .g-58{width:58%} .g-59{width:59%}
.g-60{width:60%} .g-61{width:61%} .g-62{width:62%} .g-63{width:63%} .g-64{width:64%} .g-65{width:65%} .g-66{width:66%} .g-67{width:67%} .g-68{width:68%} .g-69{width:69%}
.g-70{width:70%} .g-71{width:71%} .g-72{width:72%} .g-73{width:73%} .g-74{width:74%} .g-75{width:75%} .g-76{width:76%} .g-77{width:77%} .g-78{width:78%} .g-79{width:79%}
.g-80{width:80%} .g-81{width:81%} .g-82{width:82%} .g-83{width:83%} .g-84{width:84%} .g-85{width:85%} .g-86{width:86%} .g-87{width:87%} .g-88{width:88%} .g-89{width:89%}
.g-90{width:90%} .g-91{width:91%} .g-92{width:92%} .g-93{width:93%} .g-94{width:94%} .g-95{width:95%} .g-96{width:96%} .g-97{width:97%} .g-98{width:98%} .g-99{width:99%}
.g-100{width:100%}

/* ---- Depolama ----------------------------------------------------------------------------------------- */
.ay-depo-ozet { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.ay-depo-sayi { display: flex; align-items: baseline; gap: 10px; }
.ay-depo-buyuk { font-size: var(--fs-display); font-weight: var(--fw-x); letter-spacing: -.5px; }
.ay-depo-iz { height: 12px; }
.ay-tehlike { margin: 0; }
.ay-tehlike-eylem { display: flex; gap: 8px; flex: none; }

/* ---- Limit kartı --------------------------------------------------------------------------------------- */
.limit-kart { background: var(--gold-tint); border: 1px solid var(--gold-line); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-ic), var(--shadow-sm); }
.limit-kart .bas { display: flex; align-items: center; gap: 12px; }
.limit-kart .bas .ad { font-weight: var(--fw-x); font-size: var(--fs-body); }
.limit-kart .bas .ac { font-size: var(--fs-cap); color: var(--sub); }
.limit-kart .alt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-cap); color: var(--sub); }
.limit-kart .alt .btn { margin-left: auto; }
.limit-kart .kota-iz { background: var(--sheet); }
.ay-limit-satirlar { display: flex; flex-direction: column; gap: 12px; }

/* ---- Bilgi kutusu + izin kartı ------------------------------------------------------------------------- */
.ay-yardim { background: var(--note-soft); border: 1px solid color-mix(in srgb, var(--note-accent) 22%, transparent); border-radius: var(--r-md); padding: 12px 16px; font-size: var(--fs-sub); }
.ay-yardim b { display: block; margin-bottom: 6px; font-weight: var(--fw-x); }
.ay-yardim ol { margin: 0; padding-left: 20px; color: var(--sub); display: flex; flex-direction: column; gap: 3px; }
.ay-yardim ol b { display: inline; color: var(--ink); margin: 0; font-weight: var(--fw-bold); }
.ay-izin-kart { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ay-izin-kart + .ay-yardim { margin: 0 16px 14px; }
.ay-izin-eylem { display: flex; margin-top: 6px; }
.ay-izin-eylem .btn--hayalet { padding: 0; height: 24px; }
.ay-logo { width: 48px; height: 48px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.ay-cikis-eylem { display: flex; gap: 8px; flex: none; }
.ay-lisanslar { display: flex; flex-direction: column; gap: 2px; padding: 4px 16px 12px 66px; border-top: 1px solid var(--line-soft); }
.ay-lisanslar[hidden] { display: none; }
.ay-lisans-baglanti { font-size: var(--fs-sub); color: var(--primary-deep); text-decoration: none; padding: 6px 0; }
.ay-lisans-baglanti:hover { text-decoration: underline; }

/* ---- Profil kahramanı ---------------------------------------------------------------------------------- */
.ay-profil { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 6px; }
.ay-profil .foto { position: relative; display: block; }
.ay-profil .foto .av { display: block; }
.ay-profil .foto .degistir { position: absolute; right: 0; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sheet); border: 1.5px solid var(--line); color: var(--sub); box-shadow: var(--shadow-md); }
.ay-profil .foto .degistir .ik { width: 18px; height: 18px; }
.kalem-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--sub); border: 1.5px solid var(--line); background: var(--sheet); }
.kalem-btn .ik { width: 16px; height: 16px; }

/* ---- Dil paketi satırı --------------------------------------------------------------------------------- */
.paket-bayrak { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: var(--r-sm); background: var(--sheet-2); border: 1px solid var(--line); }
.paket-ilerleme { width: 140px; flex: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-micro); color: var(--sub); font-weight: var(--fw-bold); }
.ay-paket-sag { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ay-satir[hidden] { display: none; }

/* ---- Klavye kısayolları bölümü --------------------------------------------------------------------------- */
.ay-ky-ust { padding: 0 2px 14px; min-height: 0; }
.ay-ky-govde { flex-shrink: 0; }

/* ---- Tema önizleme kartları (Açık / Koyu / Sistem): iç içe `data-onizleme` kapsamı --o-* (tema.css üretir) ------------------- */
.tema-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 16px; }
.tema-kart { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; cursor: pointer; }
.tema-kart:focus-visible, .duvar-kare:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }
.tema-onizleme { width: 100%; }
.tema-mini { width: 100%; height: 78px; border-radius: var(--r-sm); border: 2px solid var(--line); overflow: hidden; display: flex; }
.tema-yari { flex: 1; display: flex; min-width: 0; background: var(--o-app-bg); }
.tema-yari .r { width: 12px; background: var(--o-sheet2); border-right: 1px solid var(--o-line); }
.tema-yari .l { width: 34%; background: var(--o-sheet); border-right: 1px solid var(--o-line); padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; }
.tema-yari .l i { display: block; height: 5px; border-radius: 3px; background: var(--o-line); }
.tema-yari .s { flex: 1; background: var(--o-chat-bg); padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.tema-yari .s i { display: block; height: 10px; width: 60%; border-radius: 4px; background: var(--o-bubble-in); }
.tema-yari .s i.g { align-self: flex-end; background: var(--o-bubble-out); width: 52%; }
.tema-kart .et { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sub); font-weight: var(--fw-semi); }
.tema-kart.secili .tema-mini { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-tint) 55%, transparent); }

/* ---- Duvar kağıdı ızgarası (9 tema); temaya uymayan görsel gizlenir (loading=lazy: inmez) --------------------------------- */
.duvar-izgara { display: grid; grid-template-columns: repeat(var(--duvar-sutun, 5), 1fr); gap: 10px; padding: 14px 16px; }
.ay-sag-ic .duvar-izgara { --duvar-sutun: 9; --duvar-oran: 3/4; gap: 8px; }
.duvar-kare { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.duvar-kare .gor { position: relative; aspect-ratio: var(--duvar-oran, 1); border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--line); background: var(--chat-bg); }
.duvar-kare .gor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duvar-kare .gor .b1, .duvar-kare .gor .b2 { position: absolute; height: 12px; border-radius: 5px; box-shadow: var(--shadow-balon); }
.duvar-kare .gor .b1 { left: 8%; top: 36%; width: 52%; background: var(--bubble-in); }
.duvar-kare .gor .b2 { right: 8%; top: 56%; width: 46%; background: var(--bubble-out); }
.duvar-kare .ad { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--sub); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duvar-kare.secili .gor { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-tint) 55%, transparent); }
.duvar-kare.secili .ad { color: var(--primary-deep); }
.duvar-kare .tik-rozet { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-fill); color: var(--fixed-white); box-shadow: var(--shadow-sm); }
.duvar-kare .tik-rozet .ik { width: 13px; height: 13px; }
.ay-grup-sag { font-weight: 600; color: var(--muted); }
/* Seçilen temaya göre yalnız ilgili görsel görünür: açık ↔ koyu (sistem tercihi `data-tema` yokken) */
:root[data-tema="koyu"] .yalniz-acik, :root[data-tema="acik"] .yalniz-koyu { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .yalniz-acik { display: none !important; } }
@media (prefers-color-scheme: light) { :root:not([data-tema]) .yalniz-koyu { display: none !important; } }

/* Yazı boyutu seçicisindeki "A" işareti */
.secici .a-k { font-size: var(--fs-micro); } .secici .a-b { font-size: var(--fs-h3); }

/* Flex sütun içinde (kaydırma alanı) kartlar EZİLMEZ — taşan kısım kaydırma ile görülür */
.ay-grup, .ay-grup-bas, .ay-grup-not, .limit-kart, .ay-profil, .ky-izgara, .serit, .tema-sec, .duvar-izgara { flex-shrink: 0; }

@media (max-width: 820px) {
  .ay-modal { grid-template-columns: 200px minmax(0, 1fr); }
  .ay-sag-ic { padding: 16px; }
  .ay-ara-girdi { width: 90px; }
}

/* ---- Uygulama kilidi formu (ayar-kilit.mjs): parola kur/kaldır/değiştir ------------------------------------ */
.ay-kilit-satir { display: block; }
.ay-kilit-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ay-kilit-form[hidden] { display: none; }
.ay-kilit-girdi { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sheet); padding: 9px 12px; font: inherit; font-size: var(--fs-sub); color: var(--ink); }
.ay-kilit-girdi:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }
.ay-kilit-uyari { margin: 0; font-size: var(--fs-cap); color: var(--sub); }
.ay-kilit-hata { margin: 0; font-size: var(--fs-cap); font-weight: var(--fw-bold); color: var(--danger-deep); }
.ay-kilit-hata[hidden] { display: none; }
.ay-kilit-dugmeler { display: flex; gap: 8px; }