/* =====================================================================
   Yorum.com tasarım sistemi
   Mevcut tasarım dilinden türetildi: DM Sans + Manrope, mor #6745db,
   mürekkep #211c32, çizgi #eae8ed, yumuşak zemin #f7f6fa.
   Bu dosya site.css'ten ÖNCE yüklenir; site.css eski kuralları korur.
   ===================================================================== */

:root{
  /* renk */
  --ys-ink:#211c32;          /* ana metin */
  --ys-ink-2:#4e465e;        /* gövde metni */
  --ys-muted:#77747f;        /* ikincil metin */
  --ys-faint:#9c93a8;        /* üçüncül metin, tarih, sayaç */
  --ys-line:#eae8ed;         /* kenarlık */
  --ys-line-2:#d9d3e5;       /* form kenarlığı */
  --ys-soft:#f7f6fa;         /* yumuşak zemin */
  --ys-white:#ffffff;

  --ys-purple:#6745db;       /* marka */
  --ys-purple-dark:#5131bd;  /* üzerine gelince */
  --ys-purple-soft:#f1ebff;  /* seçili zemin */
  --ys-lime:#dcf99a;         /* vurgu */

  --ys-ok:#1c6b4d;    --ys-ok-bg:#eef8f2;
  --ys-warn:#8a5a1a;  --ys-warn-bg:#fff6e8;
  --ys-bad:#a3273f;   --ys-bad-bg:#fdeef0;
  --ys-info:#3c4b8a;  --ys-info-bg:#eef1fb;
  --ys-gold:#c9a15f;  /* yıldız */

  /* tipografi */
  --ys-font:'DM Sans',Arial,sans-serif;
  --ys-font-baslik:'Manrope',Arial,sans-serif;
  --ys-fs-etiket:11px;   /* üst etiket, harf aralıklı */
  --ys-fs-kucuk:12px;
  --ys-fs-yardim:13px;
  --ys-fs-govde:14px;
  --ys-fs-govde-l:16px;
  --ys-fs-h3:17px;
  --ys-fs-h2:24px;
  --ys-fs-h1:32px;
  --ys-lh-govde:1.75;
  --ys-lh-baslik:1.25;

  /* boşluk: 4 katı */
  --ys-bos-1:4px;  --ys-bos-2:8px;  --ys-bos-3:12px; --ys-bos-4:16px;
  --ys-bos-5:20px; --ys-bos-6:24px; --ys-bos-8:32px; --ys-bos-10:40px;

  /* köşe */
  --ys-kose-kucuk:8px;
  --ys-kose:12px;
  --ys-kose-kart:14px;
  --ys-kose-blok:18px;
  --ys-kose-tam:999px;

  /* gölge ve odak */
  --ys-golge:0 5px 16px #31215408;
  --ys-golge-panel:0 18px 44px #231b3020;
  --ys-odak:0 0 0 3px #6745db2e;
}

/* ---------- tipografi ---------- */
.ys-etiket{font-size:var(--ys-fs-etiket);font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ys-faint)}
.ys-h1{font-family:var(--ys-font-baslik);font-size:var(--ys-fs-h1);font-weight:700;
  letter-spacing:-1.4px;line-height:var(--ys-lh-baslik);margin:0}
.ys-h2{font-family:var(--ys-font-baslik);font-size:var(--ys-fs-h2);font-weight:700;
  letter-spacing:-.9px;line-height:var(--ys-lh-baslik);margin:0}
.ys-h3{font-family:var(--ys-font-baslik);font-size:var(--ys-fs-h3);font-weight:700;
  letter-spacing:-.3px;line-height:1.35;margin:0}
.ys-govde{font-size:var(--ys-fs-govde-l);line-height:var(--ys-lh-govde);color:var(--ys-ink-2)}
.ys-yardim{font-size:var(--ys-fs-yardim);color:var(--ys-muted);line-height:1.6}
.ys-kirp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ys-kirp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- düğmeler ---------- */
.ys-dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-size:var(--ys-fs-govde);font-weight:600;line-height:1.2;
  padding:13px 20px;border-radius:var(--ys-kose-kucuk);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s;
  min-height:44px;max-width:100%}
.ys-dugme span{white-space:nowrap}
.ys-dugme-ana{background:var(--ys-purple);color:#fff}
.ys-dugme-ana:hover{background:var(--ys-purple-dark)}
.ys-dugme-cizgi{background:var(--ys-white);color:var(--ys-ink);border-color:var(--ys-line)}
.ys-dugme-cizgi:hover{border-color:var(--ys-purple);color:var(--ys-purple)}
.ys-dugme-sade{background:transparent;color:var(--ys-muted);padding:10px 12px}
.ys-dugme-sade:hover{color:var(--ys-ink)}
.ys-dugme-tehlike{background:var(--ys-white);color:var(--ys-bad);border-color:#f0cfd6}
.ys-dugme-tehlike:hover{background:var(--ys-bad-bg)}
.ys-dugme-kucuk{padding:9px 14px;min-height:36px;font-size:var(--ys-fs-yardim)}
.ys-dugme-tam{width:100%}
.ys-dugme[disabled],.ys-dugme[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* odak her zaman görünür, durum yalnızca renkle anlatılmaz */
.ys-dugme:focus-visible,.ys-alan:focus-visible,.ys-bag:focus-visible,
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #916df4;outline-offset:3px;border-radius:var(--ys-kose-kucuk)}

/* ---------- form ---------- */
.ys-alan-grup{margin-bottom:var(--ys-bos-4)}
.ys-etiket-alan{display:block;font-size:var(--ys-fs-govde);font-weight:600;margin-bottom:var(--ys-bos-2)}
.ys-alan{width:100%;border:1px solid var(--ys-line-2);border-radius:var(--ys-kose);
  padding:12px 14px;font:inherit;font-size:var(--ys-fs-govde);background:var(--ys-white);
  color:var(--ys-ink);min-height:44px}
textarea.ys-alan{min-height:120px;line-height:var(--ys-lh-govde);resize:vertical}
.ys-alan:focus{outline:0;border-color:var(--ys-purple);box-shadow:var(--ys-odak)}
.ys-alan[disabled]{background:var(--ys-soft);color:var(--ys-muted)}
.ys-alan-hata .ys-alan{border-color:#d0455c;background:#fff8f9}
.ys-hata-metin{display:flex;gap:6px;align-items:flex-start;font-size:var(--ys-fs-yardim);
  color:var(--ys-bad);margin-top:6px;font-weight:600}
.ys-hata-metin:before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--ys-bad);color:#fff;font-size:11px;display:grid;place-items:center;line-height:1}
.ys-ipucu{font-size:var(--ys-fs-kucuk);color:var(--ys-muted);margin-top:6px;line-height:1.6}

/* ---------- rozetler ---------- */
.ys-rozet{display:inline-flex;align-items:center;gap:6px;border-radius:var(--ys-kose-tam);
  padding:5px 11px;font-size:var(--ys-fs-kucuk);font-weight:700;line-height:1.4;white-space:nowrap}
.ys-rozet svg{width:13px;height:13px;flex:none}
.ys-rozet-ok{background:var(--ys-ok-bg);color:var(--ys-ok)}
.ys-rozet-bilgi{background:var(--ys-info-bg);color:var(--ys-info)}
.ys-rozet-notr{background:var(--ys-soft);color:var(--ys-muted)}
.ys-rozet-uyari{background:var(--ys-warn-bg);color:var(--ys-warn)}
.ys-rozet-kritik{background:var(--ys-bad-bg);color:var(--ys-bad)}

/* ---------- kart ve panel ---------- */
.ys-kart{background:var(--ys-white);border:1px solid var(--ys-line);
  border-radius:var(--ys-kose-kart);padding:var(--ys-bos-6);min-width:0}
.ys-kart-sik{padding:var(--ys-bos-4)}
.ys-kart-bag{display:block;text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
.ys-kart-bag:hover{border-color:#b59fe7}
.ys-blok{background:var(--ys-soft);border-radius:var(--ys-kose-blok);padding:var(--ys-bos-6)}
.ys-ayrac{height:1px;background:var(--ys-line);border:0;margin:var(--ys-bos-6) 0}

/* ---------- uyarı şeritleri ---------- */
.ys-bildirim{display:flex;gap:10px;align-items:flex-start;border-radius:var(--ys-kose);
  padding:14px 16px;font-size:var(--ys-fs-govde);line-height:1.65;margin-bottom:var(--ys-bos-5)}
.ys-bildirim b{font-weight:700}
.ys-bildirim-ok{background:var(--ys-ok-bg);color:var(--ys-ok)}
.ys-bildirim-uyari{background:var(--ys-warn-bg);color:var(--ys-warn)}
.ys-bildirim-hata{background:var(--ys-bad-bg);color:var(--ys-bad)}
.ys-bildirim-bilgi{background:var(--ys-info-bg);color:var(--ys-info)}
.ys-bildirim-isaret{flex:none;font-weight:700}

/* ---------- durum görünümleri ---------- */
.ys-durum{border:1px dashed var(--ys-line-2);border-radius:var(--ys-kose-blok);
  padding:var(--ys-bos-10) var(--ys-bos-6);text-align:center;background:var(--ys-white)}
.ys-durum-sik{padding:var(--ys-bos-6)}
.ys-durum-simge{width:46px;height:46px;border-radius:var(--ys-kose);margin:0 auto var(--ys-bos-4);
  display:grid;place-items:center;background:var(--ys-soft);color:var(--ys-muted)}
.ys-durum-simge svg{width:22px;height:22px}
.ys-durum h3{font-family:var(--ys-font-baslik);font-size:var(--ys-fs-h3);font-weight:700;
  margin:0 0 var(--ys-bos-2);color:var(--ys-ink)}
.ys-durum p{margin:0 auto;max-width:46ch;font-size:var(--ys-fs-govde);color:var(--ys-muted);line-height:1.7}
.ys-durum-eylem{display:flex;gap:var(--ys-bos-2);justify-content:center;flex-wrap:wrap;margin-top:var(--ys-bos-5)}
.ys-durum-hata{border-style:solid;border-color:#f0cfd6;background:#fffafb}
.ys-durum-hata .ys-durum-simge{background:var(--ys-bad-bg);color:var(--ys-bad)}
.ys-durum-basari{border-style:solid;border-color:#cfe7db;background:#fbfefc}
.ys-durum-basari .ys-durum-simge{background:var(--ys-ok-bg);color:var(--ys-ok)}

/* ---------- yüklenme ---------- */
.ys-iskelet{background:linear-gradient(90deg,#f1eff5 25%,#e7e3ee 37%,#f1eff5 63%);
  background-size:400% 100%;animation:ys-parilti 1.4s ease infinite;border-radius:var(--ys-kose-kucuk)}
.ys-iskelet-satir{height:12px;margin-bottom:10px}
.ys-iskelet-satir:last-child{width:60%;margin-bottom:0}
.ys-iskelet-gorsel{height:130px;border-radius:var(--ys-kose)}
.ys-iskelet-yuvarlak{width:46px;height:46px;border-radius:50%}
@keyframes ys-parilti{0%{background-position:100% 50%}100%{background-position:0 50%}}
.ys-donuyor{display:inline-block;width:16px;height:16px;border:2px solid #ffffff66;
  border-top-color:#fff;border-radius:50%;animation:ys-don .7s linear infinite}
@keyframes ys-don{to{transform:rotate(360deg)}}
.ys-dugme.yukleniyor{pointer-events:none;opacity:.85}

/* ---------- görsel yedeği: kırık simge çıkmasın ---------- */
.ys-gorsel{position:relative;display:block;overflow:hidden;border-radius:var(--ys-kose);
  background:var(--ys-soft)}
.ys-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.ys-gorsel-yedek{display:grid;place-items:center;width:100%;height:100%;
  background:linear-gradient(135deg,#f3eef9,#eae6f6);color:#a294c4}
.ys-gorsel-yedek svg{width:34%;max-width:42px;height:auto}
.ys-gorsel-yedek b{font-family:var(--ys-font-baslik);font-weight:700;font-size:18px;color:#7d6cab}

/* ---------- puan ---------- */
.ys-puan{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* yalnizca puan rakami: > ile dogrudan cocuk, yildiz katmanini etkilemez */
.ys-puan > b{font-family:var(--ys-font-baslik);font-size:18px;font-weight:700;color:var(--ys-ink)}
.ys-puan small{font-size:var(--ys-fs-kucuk);color:var(--ys-muted)}

/* Yildiz: iki katman birebir ayni yazi ayarini kullanir, yalnizca genislik degisir */
.ys-yildiz{position:relative;display:inline-block;color:var(--ys-line);
  font-family:var(--ys-font);font-size:14px;font-weight:400;line-height:1;letter-spacing:2px;
  white-space:nowrap;vertical-align:middle}
.ys-yildiz b{position:absolute;left:0;top:0;height:100%;overflow:hidden;
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;white-space:nowrap;color:var(--ys-gold)}
.ys-yorumsuz{font-size:var(--ys-fs-yardim);color:var(--ys-faint);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .ys-iskelet,.ys-donuyor{animation:none}
  .ys-iskelet{background:#f1eff5}
}
@media(max-width:640px){
  :root{--ys-fs-h1:26px;--ys-fs-h2:21px}
  .ys-durum{padding:var(--ys-bos-8) var(--ys-bos-4)}
  .ys-dugme{width:100%}
  .ys-dugme.ys-dugme-oto{width:auto}
}

/* ---------- açıklamalı doğrulama rozeti ---------- */
.ys-rozet-detay{position:relative;display:inline-block}
.ys-rozet-detay summary{list-style:none;cursor:pointer;user-select:none}
.ys-rozet-detay summary::-webkit-details-marker{display:none}
.ys-rozet-detay summary:focus-visible{outline:3px solid #916df4;outline-offset:3px}
.ys-rozet-ok-isaret{font-style:normal;font-weight:700;font-size:10px;opacity:.6;
  border:1px solid currentColor;border-radius:50%;width:14px;height:14px;
  display:inline-grid;place-items:center;margin-left:2px;flex:none}
.ys-rozet-detay[open] summary .ys-rozet-ok-isaret{opacity:1}
.ys-acilir{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:min(300px,86vw);
  background:var(--ys-white);border:1px solid var(--ys-line);border-radius:var(--ys-kose);
  box-shadow:var(--ys-golge-panel);padding:16px 18px;text-align:left;white-space:normal}
.ys-acilir b{display:block;font-family:var(--ys-font-baslik);font-size:var(--ys-fs-govde);
  font-weight:700;color:var(--ys-ink);margin-bottom:6px}
.ys-acilir p{margin:0 0 8px;font-size:var(--ys-fs-yardim);color:var(--ys-muted);line-height:1.65}
.ys-acilir-uyari{color:var(--ys-warn) !important;font-weight:600}
.ys-acilir a{font-size:var(--ys-fs-yardim);font-weight:600;color:var(--ys-purple);text-decoration:none}
.ys-acilir:before{content:"";position:absolute;top:-6px;left:22px;width:10px;height:10px;
  background:var(--ys-white);border-left:1px solid var(--ys-line);border-top:1px solid var(--ys-line);
  transform:rotate(45deg)}
.ys-rozet-detay.sag .ys-acilir{left:auto;right:0}
.ys-rozet-detay.sag .ys-acilir:before{left:auto;right:22px}
@media(max-width:560px){
  .ys-acilir{left:0;right:auto;width:min(300px,90vw)}
}

/* ---------- sağlayıcı kartı (prototipteki provider-card) ---------- */
.provider-card{border:1px solid var(--ys-line);border-radius:13px;padding:23px;margin-bottom:16px;
  background:#fff;transition:border-color .2s,box-shadow .2s}
.provider-card:hover{border-color:#c9b6e6;box-shadow:0 6px 20px #2415340a}
.provider-card .card-main{display:flex;gap:21px}
.provider-card .avatar{width:100px;height:112px;border-radius:12px;overflow:hidden;flex-shrink:0;
  background:#eee6f8;display:grid;place-items:center;font-family:var(--ys-font-baslik);font-size:28px;
  color:#9b80b2;font-weight:700}
.provider-card .avatar img{width:100%;height:100%;object-fit:cover}
.provider-card.mekan-card .avatar{width:150px;height:112px}
.provider-card.marka-card .avatar{width:96px;height:96px;border-radius:14px;background:#f4f0fb}
.provider-card .card-info{min-width:0;flex:1}
.provider-card .title-row{display:flex;align-items:flex-start;gap:10px}
.provider-card .title-row h3{font-family:var(--ys-font-baslik);font-size:19px;letter-spacing:-.5px;
  margin:0;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.provider-card .title-row h3 a{color:var(--ys-ink);text-decoration:none}
.provider-card .title-row h3 a:hover{color:var(--ys-purple)}
.provider-card .checked{width:21px;height:21px;border-radius:50%;background:#eae3fa;color:#6b46c4;
  font-size:12px;display:inline-grid;place-items:center;flex:none;margin-top:3px}
.provider-card .specialty{font-size:14px;color:var(--ys-purple);margin:5px 0 0}
.provider-card .score-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;
  font-size:13px;color:#9c8ba8}
.provider-card .score-line > b{color:var(--ys-ink);font-family:var(--ys-font-baslik);font-size:15px}
.provider-card .score-line .sep{color:#cdc3d6}
.provider-card .location{font-size:13px;color:#8e7b9a;margin:9px 0 0}
.provider-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.provider-card .chip{background:#f8f6fb;border:1px solid #eee7f4;border-radius:5px;padding:5px 9px;
  font-size:11px;color:#9b89a8}
.provider-card .card-quote{border-left:2px solid #d8c7eb;background:#faf8fd;border-radius:0 6px 6px 0;
  margin:18px 0 0 121px;padding:10px 13px;font-size:13px;color:#8a7798;line-height:1.7}
.provider-card .card-quote small{color:#b3a4bf;font-size:11px}
.provider-card .card-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:18px 0 0 121px;padding-top:14px;border-top:1px solid var(--ys-line);font-size:13px;color:#9c8ba8}
.provider-card.mekan-card .card-quote,.provider-card.mekan-card .card-bottom{margin-left:171px}
.provider-card.marka-card .card-quote,.provider-card.marka-card .card-bottom{margin-left:117px}
.profile-button{border:1px solid #d9cbe9;border-radius:7px;background:#fff;color:var(--ys-purple);
  padding:9px 13px;font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.profile-button:hover{border-color:var(--ys-purple);background:#faf7ff}
@media(max-width:700px){
  .provider-card .card-main{gap:14px}
  .provider-card .avatar{width:82px;height:92px}
  .provider-card.mekan-card .avatar{width:110px;height:92px}
  .provider-card .card-quote,.provider-card .card-bottom,
  .provider-card.mekan-card .card-quote,.provider-card.mekan-card .card-bottom,
  .provider-card.marka-card .card-quote,.provider-card.marka-card .card-bottom{margin-left:0}
  .provider-card .card-bottom{flex-wrap:wrap}
}

/* ---------- puan dağılımı: yorum yoksa çizilmez ---------- */
.ys-dagilim{display:grid;gap:7px}
.ys-dagilim-satir{display:grid;grid-template-columns:30px 1fr 42px;gap:10px;align-items:center;
  font-size:var(--ys-fs-kucuk);color:var(--ys-muted);background:none;border:0;padding:0;
  font:inherit;font-size:var(--ys-fs-kucuk);cursor:pointer;text-align:left;text-decoration:none}
.ys-dagilim-satir i{height:8px;border-radius:var(--ys-kose-tam);background:#efecf5;display:block;
  position:relative;overflow:hidden}
.ys-dagilim-satir i b{position:absolute;inset:0 auto 0 0;background:var(--ys-purple);
  border-radius:var(--ys-kose-tam)}
.ys-dagilim-satir:hover i b{background:var(--ys-purple-dark)}
.ys-dagilim-satir[aria-pressed="true"]{color:var(--ys-purple);font-weight:700}

/* kart ızgarası */
.sk-izgara{display:grid;gap:12px}
.sk-izgara-kutu{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* Rating icons share geometry; typography cannot shift filled/empty layers. */
.ys-rating-icons{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;line-height:0;flex:none;direction:ltr}
.ys-rating-icons > svg{display:block;width:16px;height:16px;min-width:16px;flex:0 0 16px;overflow:hidden;filter:none}
.ys-rating-icons > svg > path{stroke:none;filter:none}