/* PatiGaga - mobil oncelikli. Govde sistem font yiginini kullanir
   (hiz + eksiksiz Turkce); YALNIZ basliklar asagidaki self-host yuzu alir.

   NEDEN: her sey sistem fontundayken sayfanin kendi sesi yoktu ve tasarim
   "kategoriyle degistirilebilir" okunuyordu. Bricolage Grotesque secildi:
   karakteri olan bir grotesk, Inter/Space Grotesk klisesine dusmuyor.

   HARICI ISTEK YOK: dosyalar depoda, fonts/ altinda self-host. CSP zaten
   font-src 'self' diyor. Iki alt kume, toplam 58 KB:
     latin      (40 KB) - ASCII + Latin-1 + U+0131 (noktasiz i)
     latin-ext  (18 KB) - U+0130 I-noktali, U+011E/F G-breve, U+015E/F S-cedilla
   Turkce'nin 12 ozel harfi (i I g G s S c C o O u U) TARAYICIDA gorsel olarak
   dogrulandi; eksik glif yok. Yeni bir yuz denenirse ayni test tekrarlanmali:
   eksik glif sessizce yedege duser ve baslik baska bir fontla cizilir.

   font-display:swap - font inerken metin GORUNUR kalir, bos ekran olmaz. */
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#fbf3ea; --card:#ffffff; --ink:#3a2c22; --line:#eaddcf; --panel:#F9E8D8;

  /* KONTRAST NOTU (olculdu 2026-08-18, WCAG 2.1)
     Eski --muted:#8a7867 zeminde 3.85:1, kart uzerinde 4.23:1 idi; ikisi de
     normal metin icin gereken 4.5:1'in altinda. Render edilen 55 metin
     ogesinden 25'i bu yuzden esigi gecmiyordu. Yeni deger 5.65:1 / 6.34:1.
     Olcum: node tools/design-check.mjs */
  --muted:#6f5c4c;

  /* Eski --accent:#c9743d uzerindeki BEYAZ yazi 3.47:1 veriyordu, yani
     sayfanin varlik sebebi olan birincil dugmenin yazisi esigi geciyordu.
     Marka rengi kaybolmasin diye ikiye ayrildi:
       --accent      metin TASIYAN yuzeyler (beyaz uzerinde 5.45:1,
                     zeminde metin olarak 4.85:1 - ikisi de gecer)
       --accent-soft yalnizca DOLGU ve dekor; uzerine yazi yazilmaz */
  --accent:#a2551f; --accent-soft:#c9743d; --accent-ink:#fff;

  --display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ok:#2e7d52; --warn:#c98a1e; --danger:#c0453f; --shadow:0 2px 10px rgba(90,60,30,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{margin:0}
/* Basliklar self-host yuzu alir; govde sistem yiginda kalir. */
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.02em}
.hidden{display:none!important}
body.guest .hidden-guest{display:none!important}
body.guest{padding-bottom:0}

/* Ust bar */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
  padding-top:calc(12px + env(safe-area-inset-top));
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:18px}
.topbar-right{display:flex; align-items:center; gap:10px}
.net-dot{width:10px; height:10px; border-radius:50%; background:var(--muted)}
.net-dot.online{background:var(--ok)} .net-dot.offline{background:var(--danger)}
.icon-btn{background:transparent; border:none; font-size:20px; color:var(--ink); padding:6px; border-radius:8px}
.icon-btn:active{background:rgba(0,0,0,.06)}

.view{padding:16px; max-width:820px; margin:0 auto}

/* Butonlar */
.btn{border-radius:12px; padding:12px 16px; font-size:15px; font-weight:600; background:var(--card); color:var(--ink); border:1px solid var(--line)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent; color:var(--danger); border-color:#e6c4c1}
.btn:active{transform:translateY(1px)}
.btn.block{display:block; width:100%}
.btn[disabled]{opacity:.6; pointer-events:none}
.btn:focus-visible,.tab:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d9a06a; outline-offset:2px}

/* Uyari / bilgi bandi */
.notice{display:flex; gap:12px; align-items:center; background:#fff6e6; border:1px solid #f0d9a8;
  border-radius:12px; padding:10px 12px; margin-bottom:14px}
.notice small{display:block; color:var(--muted); margin-top:2px}
.notice .btn{padding:8px 12px; font-size:13px; margin-left:auto; white-space:nowrap}

/* Hatirlatma satirlari */
.reminders{margin-bottom:16px}
.rem-item{display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; box-shadow:var(--shadow)}
.rem-item .rem-when{margin-left:auto}

/* Durum rozeti. Eskiden .rem-item ve .care-item 4px renkli sol serit tasiyordu;
   ayni bilgiyi artik rozet veriyor. Renk TEK BASINA anlam tasimaz: metin
   ("2 gun gecikti", "Gecikti", "Yapildi") her zaman rozetin icindedir, renk
   yalnizca onu hizlandirir (WCAG 1.4.1).
   Kontrast olculdu (11px kalin = kucuk metin, esik 4.5:1):
     notr  #6f5c4c / #F9E8D8  5.30:1
     late  #8f2e29 / #fdecea  7.09:1  (.care-tag.legal ile ayni cift)
     due   #6b4a12 / #fbe3bd  6.44:1
     ok    #2e7d52 / #eef7ee  4.60:1  (.care-clear ile ayni cift) */
.st-pill,.rem-item .rem-when{font-size:11px; font-weight:700; padding:2px 8px;
  border-radius:999px; background:var(--panel); color:var(--muted); white-space:nowrap}
.st-pill.s-late,.rem-item.overdue .rem-when{background:#fdecea; color:#8f2e29}
.st-pill.s-due{background:#fbe3bd; color:#6b4a12}
.st-pill.s-ok,.st-pill.s-done{background:#eef7ee; color:var(--ok)}
.rem-badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--panel); color:var(--ink)}
.digest-ava{width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none}
.bday-card{background:linear-gradient(135deg,#fff2d8,#ffe3ef); border:1px solid #f2d3b0;
  border-radius:14px; padding:14px; margin-bottom:12px; font-size:15px}

/* Hayvan kartlari */
.section-head{display:flex; align-items:center; justify-content:space-between; margin:6px 0 12px}
.section-head h2{font-size:17px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(min-width:620px){ .grid{grid-template-columns:1fr 1fr 1fr} }
.pet-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); text-align:left; padding:0}
.pet-card .photo{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--panel); display:block}
.pet-card .photo.placeholder{display:flex; align-items:center; justify-content:center; font-size:44px}
.pet-card .species-chip{position:absolute; top:8px; left:8px; background:rgba(255,255,255,.92);
  border-radius:999px; padding:2px 7px; font-size:14px; box-shadow:var(--shadow)}
.pet-card .body{padding:10px 12px}
.pet-card .name{font-weight:700; font-size:16px}
.pet-card .meta{color:var(--muted); font-size:12px; margin-top:2px}
.pet-card .pill{display:inline-block; margin-top:8px; font-size:11px; background:var(--panel); border-radius:999px; padding:2px 8px}

/* Karne basligi: ad ve yas tepede buyuk */
.karne-hero{display:flex; gap:16px; align-items:center; margin:12px 0 14px;
  background:linear-gradient(135deg,var(--panel),#fff); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow)}
.hero-photo{width:96px; height:96px; border-radius:18px; object-fit:cover; background:#fff; flex:none}
.hero-photo.placeholder{display:flex; align-items:center; justify-content:center; font-size:44px}
.hero-name{font-size:30px; font-weight:800; line-height:1.1; letter-spacing:-.5px}
.hero-age{font-size:18px; font-weight:700; color:var(--accent); margin-top:2px}
.hero-sub{color:var(--muted); font-size:13px; margin-top:4px}
@media(max-width:380px){ .hero-name{font-size:24px} .hero-photo{width:76px;height:76px} }

.timeline{margin-top:8px}
.ev{display:flex; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px}
.ev .ico{font-size:22px; flex:none; width:34px; text-align:center}
.ev .ev-title{font-weight:700}
.ev .ev-meta{color:var(--muted); font-size:12px; margin-top:2px}
.ev .ev-due{font-size:12px; margin-top:4px; color:var(--accent); font-weight:600}
.ev .ev-photo{margin-top:8px; max-width:150px; border-radius:10px; border:1px solid var(--line); cursor:zoom-in; display:block}
.ev .ev-actions{margin-left:auto; display:flex; gap:4px; align-items:flex-start}

/* Takvim */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-dow{text-align:center; font-size:11px; color:var(--muted); padding:4px 0}
.cal-cell{aspect-ratio:1/1; border:1px solid var(--line); border-radius:8px; padding:3px; font-size:12px;
  background:var(--card); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center}
.cal-cell.out{opacity:.4}
.cal-cell.today{border-color:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-soft)}
.cal-num{align-self:flex-start; font-weight:600; color:var(--muted); line-height:1}
.cal-cell .dots{position:absolute; bottom:4px; left:4px; right:4px; display:flex; flex-wrap:wrap; gap:2px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent-soft)}
.dot.asi{background:#2e7d52}.dot.ilac{background:#2f6fb0}.dot.ameliyat{background:#c0453f}
.dot.hastalik{background:#c98a1e}.dot.kontrol{background:#7a5b43}.dot.dogum{background:#c86fa6}
.cal-bday{position:absolute; top:2px; right:2px; font-size:11px}
.cal-more{font-size:10px; color:var(--muted); align-self:center}

/* Onemli gun: hayvan fotografi + hareketli uyari cercevesi */
.cal-avatars{display:flex; gap:2px; align-items:center; justify-content:center; margin-top:auto; margin-bottom:2px}
.cal-avatar{position:relative; width:26px; height:26px; flex:none; display:block}
.cal-avatar img, .cal-avatar .ph{
  position:relative; z-index:2; width:26px; height:26px; border-radius:6px; object-fit:cover;
  display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--panel);
}
/* Donen renkli halka (hareketli uyari) */
.cal-avatar::before{
  content:''; position:absolute; inset:-3px; border-radius:9px; z-index:0;
  background:conic-gradient(from 0deg, var(--accent-soft), #ffcf6b, var(--ok), var(--accent-soft));
  animation:kk-spin 2.6s linear infinite;
}
/* Halkanin icini kapatip ince cerceve birakir */
.cal-avatar::after{
  content:''; position:absolute; inset:-1px; border-radius:7px; background:var(--card); z-index:1;
}
.cal-avatar.overdue::before{
  background:conic-gradient(from 0deg, var(--danger), #ff9a76, var(--danger));
  animation:kk-spin 1.2s linear infinite, kk-pulse 1.2s ease-in-out infinite;
}
@keyframes kk-spin{ to{ transform:rotate(360deg) } }
@keyframes kk-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@media(min-width:620px){ .cal-avatar, .cal-avatar img, .cal-avatar .ph{width:34px;height:34px} }

/* Formlar */
.field{margin-bottom:12px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600}
.field input,.field select,.field textarea{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px; background:#fff; color:var(--ink)}
.field textarea{min-height:70px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.photo-pick{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.photo-pick .preview{width:64px; height:64px; border-radius:12px; background:var(--panel); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden}
.photo-pick .preview.wide{width:84px; height:64px}
.photo-pick .preview img{width:100%; height:100%; object-fit:cover}
.photo-pick .btn{display:inline-block}
.hint{font-size:12px; color:var(--muted); margin-top:4px}
.form-actions{display:flex; gap:10px; margin-top:8px}
.form-actions .btn{flex:1}
.form-err{background:#fdecea; border:1px solid #f3c2bd; color:#8f2e29; border-radius:10px;
  padding:10px 12px; font-size:13px; margin-bottom:12px}

/* Parola alani */
.pass-wrap{position:relative}
.pass-wrap input{padding-right:44px}
.pass-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent;
  border:none; font-size:17px; padding:6px; border-radius:8px; line-height:1}
.meter{margin-top:8px}
.meter-bar{height:5px; background:var(--line); border-radius:999px; overflow:hidden}
/* Genislik degil olcek: width her karede yeniden yerlesim tetikler, transform
   tetiklemez. Gorunen sonuc birebir ayni. */
.meter-bar span{display:block; height:100%; width:100%; border-radius:999px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s, background .25s}
.meter small{font-size:11px; color:var(--muted); display:block; margin-top:4px}
.meter.s1 .meter-bar span{transform:scaleX(.25); background:var(--danger)}
.meter.s2 .meter-bar span{transform:scaleX(.5); background:var(--warn)}
.meter.s3 .meter-bar span{transform:scaleX(.75); background:#8ab54a}
.meter.s4 .meter-bar span{transform:scaleX(1); background:var(--ok)}
/* Bot tuzagi: ekranda gorunmez, bot doldurursa yakalanir */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0}

/* Giris ekrani */
.auth{max-width:400px; margin:24px auto}
.auth-logo{text-align:center; margin-bottom:18px}
.auth-logo h1{font-size:24px; margin-top:8px}
.auth-tabs{display:flex; gap:6px; background:var(--panel); border-radius:12px; padding:4px; margin-bottom:16px}
.auth-tab{flex:1; border:none; background:transparent; padding:9px; border-radius:9px; font-weight:700; color:var(--muted)}
.auth-tab.active{background:#fff; color:var(--ink); box-shadow:var(--shadow)}

/* Giris ekranindaki dil secici */
.auth-lang{text-align:center; margin-top:10px}
.auth-lang select{border:1px solid var(--line); background:var(--card); color:var(--muted);
  border-radius:999px; padding:6px 12px; font-size:13px; font-family:inherit}

/* Ayarlar / kartlar */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px; box-shadow:var(--shadow)}
.card h3{font-size:15px; margin-bottom:10px}
.card p{margin:0 0 4px}
.switch{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0}
.switch small{color:var(--muted); display:block; font-weight:400; margin-top:2px}
.switch input[type=checkbox]{width:20px; height:20px; flex:none; accent-color:var(--accent)}

/* Bos durum */
.empty{text-align:center; color:var(--muted); padding:40px 16px}
.empty .big{font-size:46px}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(40,26,16,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50}
@media(min-width:620px){ .modal{align-items:center} }
.modal.hidden{display:none}
.modal-card{background:var(--bg); width:100%; max-width:560px; max-height:92vh; overflow:auto; border-radius:18px 18px 0 0; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom))}
@media(min-width:620px){ .modal-card{border-radius:18px} }
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.modal-head h2{font-size:18px}

/* Yakindaki can dostlari: yatay kaydirilan kucuk kartlar */
.nearby{margin-bottom:18px}
.nearby-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity}
.nearby-card{flex:0 0 132px; scroll-snap-align:start; background:var(--card); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.nearby-card img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--panel)}
.nearby-card .nb-body{padding:8px 10px 10px}
.nearby-card .nb-name{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nearby-card .nb-meta{color:var(--muted); font-size:11px; margin:2px 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nearby-card .btn.mini{width:100%; padding:6px 8px; font-size:12px; border-radius:8px}

/* Bakim rehberi: tur ve yasa gore ne zaman ne yapilmali */
.care-card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px; margin-top:14px; box-shadow:var(--shadow)}
.care-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.care-head h2{font-size:16px}
.care-stage{font-size:11px; font-weight:700; background:var(--panel); color:var(--ink);
  border-radius:999px; padding:3px 10px; white-space:nowrap}
.care-note{font-size:12px; color:var(--muted); background:var(--panel); border-radius:10px;
  padding:8px 10px; margin-bottom:10px}
.care-clear{font-size:14px; color:var(--ok); background:#eef7ee; border:1px solid #cfe4cf;
  border-radius:10px; padding:10px 12px; margin-bottom:10px}
.care-list{margin-bottom:10px}
.care-item{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin-bottom:8px; background:var(--card)}
.care-item.s-done,.care-item.s-ok{opacity:.75}
.care-ico{font-size:20px; flex:none; width:26px; text-align:center; line-height:1.3}
.care-body{flex:1; min-width:0}
.care-title{font-weight:700; font-size:14px}
.care-when{display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  color:var(--muted); font-size:12px; margin-top:3px}
.care-desc{font-size:12px; color:var(--ink); opacity:.85; margin-top:5px; line-height:1.45}
.care-item .btn.mini{flex:none; padding:6px 10px; font-size:12px; border-radius:8px; white-space:nowrap}
.care-tag{display:inline-block; font-size:10px; font-weight:700; padding:1px 7px;
  border-radius:999px; vertical-align:middle; margin-left:4px}
.care-tag.legal{background:#fdecea; color:#8f2e29}
.care-tag.opt{background:var(--panel); color:var(--muted)}
.care-src{margin-top:10px; line-height:1.45}
.care-plan .section-head{margin-top:14px}

/* Taslak bandi: kaydedilmemis form geri yuklendiginde ustte cikar */
.draft-bar{display:flex; align-items:center; gap:10px; background:#eef7ee; border:1px solid #cfe4cf;
  border-radius:10px; padding:8px 10px; margin-bottom:12px; font-size:13px}
.draft-bar .btn{margin-left:auto; padding:6px 10px; font-size:12px; white-space:nowrap}

/* KVKK aydinlatma metni ve onay kutusu */
.consent-list{margin:10px 0; padding-left:18px; font-size:14px; line-height:1.5}
.consent-list li{margin-bottom:6px}
.consent-check{display:flex; gap:10px; align-items:flex-start; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:12px; margin:12px 0; font-size:14px}
.consent-check input{width:20px; height:20px; flex:none; accent-color:var(--accent); margin-top:1px}

/* Yakindaki can dostlari: "bize ulasin" satiri */
.nearby-cta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px}
.nearby-cta .hint{margin:0; flex:1; min-width:180px}
.nearby-cta .btn.mini{padding:6px 12px; font-size:12px; border-radius:8px; white-space:nowrap}

/* ---------- Sahiplendirme ---------- */
.adopt-tabs{margin-bottom:14px}
.adopt-tabs .auth-tab{font-size:13px; padding:9px 4px}
.ad-badge{display:inline-block; min-width:18px; padding:0 5px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:11px; line-height:18px; text-align:center}

/* Guvenlik uyarisi: para gonderme, umumi yerde bulus */
.ad-safety{background:#fff6e6; border:1px solid #f0d9a8; border-radius:12px;
  padding:10px 12px; font-size:12.5px; line-height:1.5; margin-bottom:12px}

.adopt-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.adopt-filters select{flex:1 1 140px; min-width:0; padding:9px 10px; border:1px solid var(--line);
  border-radius:10px; font-size:14px; background:#fff; color:var(--ink); font-family:inherit}
.ad-urgent-toggle{display:flex; align-items:center; gap:6px; font-size:13px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; white-space:nowrap}
.ad-urgent-toggle input{width:18px; height:18px; accent-color:var(--accent)}

.adopt-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow); text-align:left; padding:0; width:100%}
.adopt-card img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--panel); display:block}
.adopt-card .body{padding:10px 12px}
.adopt-card .name{font-weight:700; font-size:16px}
.adopt-card .meta{color:var(--muted); font-size:12px; margin-top:2px}
.ad-urgent-flag{position:absolute; top:8px; right:8px; background:var(--danger); color:#fff;
  font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; letter-spacing:.02em}

.ad-chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.ad-chips.big{margin:10px 0 12px}
.ad-chip{font-size:11px; font-weight:600; background:var(--panel); color:var(--ink);
  border-radius:999px; padding:2px 8px; white-space:nowrap}
.ad-chip.urgent{background:#fdecea; color:#8f2e29}

.ad-hero{width:100%; border-radius:14px; display:block; background:var(--panel)}
.ad-facts{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:10px}
.ad-facts th{text-align:left; color:var(--muted); font-weight:600; padding:6px 10px 6px 0;
  white-space:nowrap; vertical-align:top; width:38%}
.ad-facts td{padding:6px 0; border-bottom:1px solid var(--line)}
.ad-facts tr:last-child td{border-bottom:none}
.ad-desc{white-space:pre-wrap; line-height:1.55; font-size:14px; background:var(--panel);
  border-radius:12px; padding:12px; margin:10px 0}

.ad-status{display:inline-block; font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:999px; margin-top:4px; background:var(--panel); color:var(--ink)}
.ad-status.s-new,.ad-status.s-pending{background:#fdf1dc; color:#8a5d10}
.ad-status.s-interested,.ad-status.s-approved,.ad-status.s-connected{background:#e6f4ec; color:#1f6b45}
.ad-status.s-declined,.ad-status.s-rejected{background:#fdecea; color:#8f2e29}
.ad-status.s-paused,.ad-status.s-closed{background:var(--panel); color:var(--muted)}
.ad-status.s-adopted{background:linear-gradient(135deg,#fff2d8,#ffe3ef); color:#7a4a2a}

.ad-app{margin-bottom:12px}
.ad-app-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ad-answers{font-size:13px; margin:8px 0}
.adopt-owner .form-actions{margin-top:6px}

/* Toast */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; z-index:60; box-shadow:var(--shadow); max-width:90vw; text-align:center}
.toast.hidden{display:none}
.toast.err{background:var(--danger)} .toast.ok{background:var(--ok)}

/* Alt sekme cubugu */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; background:var(--panel); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; border:none; background:transparent; padding:8px 0 10px; font-size:20px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px}
.tab span{font-size:11px; font-weight:600}
.tab.active{color:var(--accent)}

.fab{position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:28px; box-shadow:var(--shadow); z-index:25}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  .btn:active{transform:none}
  .cal-avatar::before{animation:none!important}
}

/* Alt bilgi. HTML'de her zaman durur (arama motoru ve reklam incelemesi
   gizlilik baglantisini gormeli), ancak yalnizca giris YAPMAMIS ekranda
   gosterilir: giris yapan kullanicida altta sabit sekme cubugu var ve
   ikisi ust uste binerdi. */
.site-foot{display:none}
body.guest .site-foot{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  font-size:13px; color:var(--muted); text-align:center;
}
body.guest .site-foot a{color:var(--muted); text-decoration:underline}
/* Alt bilgi ayiricisi. BILEREK .dot DEGIL: .dot takvimdeki 6px renkli
   noktadir ve ayni adi kullanmak ayiricinin ustune o yuvarlagi giydiriyordu
   (metin gorunmez oluyordu). */
.site-foot .foot-sep{color:var(--line); user-select:none}
body.guest .site-foot a:hover, body.guest .site-foot a:focus-visible{color:var(--ink)}
.site-foot .dot{opacity:.5}