/* /referanslar — kart listesi, arama, sayfalama ve referans penceresi (modal) */

/* --- Referans kartları --- */
.reference-sec .references-card-row {
    --ref-gap: 24px;
    row-gap: var(--ref-gap);
}

.reference-sec .references-card {
    /* Kaynak görseller 300px genişlikte; kartı 340px ile sınırlayıp netliği koruyoruz */
    width: 100% !important;
    max-width: 340px;
    height: auto !important;
    margin: 0 auto !important;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.reference-sec .references-card:hover {
    transform: translateY(-4px);
    border-color: #d6dbe6;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}

.reference-sec .references-card .imgtestsec {
    position: relative;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 300 / 158;
    overflow: hidden;
    background: #f4f6fa;
}

.reference-sec .references-card .imgtestsec img.card-img-top {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center;
    border-radius: 0 !important;
    transition: transform .4s ease;
}

.reference-sec .references-card:hover .imgtestsec img.card-img-top {
    transform: scale(1.04);
}

/* Kartın tamamı bağlantı: metin rengi/alt çizgi miras almasın */
.reference-sec a.references-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
}

.reference-sec a.references-card-link:hover,
.reference-sec a.references-card-link:focus {
    text-decoration: none !important;
    color: inherit;
}

.reference-sec a.references-card-link:focus-visible {
    outline: 3px solid #20b9a8;
    outline-offset: 3px;
}

.reference-sec .references-card .card-body {
    padding: 14px 12px 16px;
}

.reference-sec .ref-card-title {
    font-size: 16px !important;
    line-height: 1.35;
    margin-bottom: 4px;
    text-align: center;
    font-weight: 800;
    color: #101828;
}

.reference-sec .references-card .card-text {
    margin-bottom: 0;
    color: #667085;
}

@media (max-width: 575.98px) {
    .reference-sec .references-card .imgtestsec {
        aspect-ratio: 300 / 150;
    }
}

/* --- Sayfalama --- */
.reference-sec .references-pagination {
    width: 100%;
    margin-top: 34px;
}

.reference-sec .references-pagination .sayfalama {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
}

.reference-sec .references-pagination .sayfalama span {
    display: inline-flex;
}

.reference-sec .references-pagination .sayfalama span a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #344054;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: all .2s ease-out;
}

.reference-sec .references-pagination .sayfalama span a:hover {
    background: #f4f6fa;
    border-color: #cfd6e4;
    color: #101828;
    transform: translateY(-1px);
}

.reference-sec .references-pagination .sayfalama .sayfalama-active a {
    background: #20b9a8;
    border-color: #20b9a8;
    color: #fff;
    box-shadow: 0 4px 12px rgba(32, 185, 168, .35);
}

.reference-sec .references-pagination .sayfalama .sayfalama-active a:hover {
    background: #1aa294;
    border-color: #1aa294;
    color: #fff;
}

/* Kart altı eylem düğmeleri: Siteyi Gör / Detay Gör */
.reference-sec .references-card .ref-actions{display:flex;gap:8px;padding:0 12px 14px;}
.reference-sec .references-card .ref-btn{flex:1 1 0;text-align:center;font-size:14px;font-weight:700;line-height:1;padding:11px 8px;border-radius:8px;text-decoration:none!important;border:2px solid #20b9a8;transition:background .2s,color .2s;}
.reference-sec .references-card .ref-btn-site{background:#20b9a8;color:#fff!important;}
.reference-sec .references-card .ref-btn-site:hover{background:#1aa294;border-color:#1aa294;}
.reference-sec .references-card .ref-btn-detail{background:#fff;color:#12303a!important;border-color:#cfd6e4;}
.reference-sec .references-card .ref-btn-detail:hover{border-color:#20b9a8;color:#0f766e!important;}
.reference-sec .references-card .ref-btn:focus-visible{outline:3px solid #20b9a8;outline-offset:2px;}

/* --- Arama çubuğu --- */
.tb-rf-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:0 0 26px}
.tb-rf-bar input{flex:1 1 300px;max-width:480px;padding:13px 18px;border:1px solid #d0d5dd;border-radius:12px;font:inherit;font-size:16px;background:#fff;color:#101828}
.tb-rf-bar input:focus{outline:3px solid rgba(32,185,168,.35);border-color:#20b9a8}
.tb-rf-ct{color:#667085;font-size:15px}
.tb-rf-none{text-align:center;padding:22px 0;color:#667085;font-size:16px}
.tb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tb-rf-sonuc[hidden],.tb-rf-none[hidden]{display:none}

/* --- Referans penceresi --- */
.tbm{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:rgba(10,18,30,.88);padding:2.2vh 2.2vw;gap:10px;font-family:inherit}
.tbm[hidden]{display:none}
.tbm *{box-sizing:border-box}
.tbm-bar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:8px 10px 8px 16px;flex:0 0 auto}
.tbm-ti{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tbm-ti b{font-size:16px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbm-ti small{color:#667085;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbm-c{color:#667085;font-size:14px;white-space:nowrap}
.tbm-tabs{display:flex;background:#f2f4f7;border-radius:11px;padding:3px;gap:2px;flex:none}
.tbm-tab{border:0;background:transparent;color:#344054;font:inherit;font-size:14px;font-weight:700;padding:8px 16px;border-radius:9px;cursor:pointer;white-space:nowrap}
.tbm-tab[aria-selected="true"]{background:#20b9a8;color:#fff;box-shadow:0 2px 8px rgba(32,185,168,.35)}
.tbm-tab:not([aria-selected="true"]):hover{background:#e4e7ec}
.tbm-o{background:#e6f7f5;color:#0f766e;font-weight:700;text-decoration:none;padding:9px 14px;border-radius:10px;font-size:14px;white-space:nowrap}
.tbm-o:hover{background:#cdeeea;color:#0f766e}
.tbm-p,.tbm-n,.tbm-x{width:42px;height:42px;border:0;border-radius:12px;background:#e6f7f5;color:#0f766e;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:inherit;padding:0;flex:none}
.tbm-x{background:#101828;color:#fff;font-size:18px}
.tbm-p:hover,.tbm-n:hover{background:#cdeeea}
.tbm-x:hover{background:#000}
.tbm button:focus-visible,.tbm a:focus-visible{outline:3px solid #20b9a8;outline-offset:2px}
.tbm-bd{position:relative;flex:1;min-height:0;background:#fff;border-radius:14px;overflow:hidden}
.tbm-bd iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.tbm-ld{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;background:#101828 center top/cover no-repeat}
.tbm-ld::before{content:"";position:absolute;inset:0;background:rgba(10,18,30,.55)}
.tbm-ldb{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:420px;background:#fff;color:#101828;border-radius:16px;padding:24px 26px;text-align:center;font-size:16px;line-height:1.5;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.tbm-sp{width:38px;height:38px;border:4px solid #e6f7f5;border-top-color:#20b9a8;border-radius:50%;animation:tbmsp .8s linear infinite}
@keyframes tbmsp{to{transform:rotate(360deg)}}
.tbm-ld[hidden],.tbm-bl[hidden]{display:none}
.tbm-bl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;background:#fff;overflow:auto}
.tbm-bl img{max-width:min(720px,100%);height:auto;border-radius:12px;border:1px solid #e6e9f0}
.tbm-bl p{margin:0;max-width:560px;color:#101828}
.tbm-bl .tbm-go{display:inline-flex;background:#20b9a8;color:#fff;font-weight:700;border:0;border-radius:10px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer}
.tbm-st{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;flex:0 0 auto}
.tbm-t{flex:0 0 auto;border:2px solid transparent;border-radius:10px;padding:0;background:#fff;cursor:pointer;opacity:.78;overflow:hidden;line-height:0}
.tbm-t img{display:block;width:104px;height:55px;object-fit:cover}
.tbm-t:hover{opacity:1}
.tbm-t.on{opacity:1;border-color:#ebae42;border-color:#f5b82e}
.tbm-lock,.tbm-lock body{overflow:hidden}
.tbm-nv{display:none}

@media (max-width:760px){
  .tbm{padding:0;gap:0}
  .tbm-bar,.tbm-bd{border-radius:0}
  .tbm-bar{flex-wrap:nowrap;padding:8px 8px 8px 12px;gap:6px}
  .tbm-ti{flex:1 1 auto}
  .tbm-bar .tbm-c,.tbm-bar .tbm-p,.tbm-bar .tbm-n{display:none}
  .tbm-tab{padding:7px 10px;font-size:13px}
  .tbm-o{padding:8px 10px;font-size:12.5px;flex:none}
  .tbm-nv{display:flex;align-items:center;gap:8px;background:#fff;padding:6px 10px;flex:0 0 auto}
  .tbm-nv .tbm-p,.tbm-nv .tbm-n{flex:1;width:auto;height:44px}
  .tbm-nv .tbm-c{display:block;min-width:70px;text-align:center;font-size:14px;color:#667085}
  .tbm-st{background:#101828;padding:6px}
  .tbm-t img{width:76px;height:40px}
}
@media (max-width:480px){
  .tbm-o span{display:none}
  .tbm-o::after{content:"↗";font-size:15px}
  .tbm-ti small{display:none}
}